css如何使div背景图片填充

Posted 2023-04-30

css使div背景图片填充的具体操作步骤如下：

1、我们首先打开前端开发工具，新建一个html代码页面。

2、在html代码页面上创建一个用于设置背景颜色的div标签，然后给这个标签添加上class = "bg-img"。

3、设置背景图片，创建style标签，然后在标签里面对类为bg-img设置背景图片、图片不重复、宽、高的样式。

4、保存html代码，使用浏览器打开，这个时候会发现浏览器上的背景图片显示在左上角。

5、回到html代码页面，在bg-img类里添加background-position: center的属性。

6、保存html代码后重新刷新浏览器，这个时候会发现浏览器上的背景图片已经自动居中了。

参考技术A 首先得看你需要的背景图片与DIV的尺寸是否一致，如果一致就可可以在CSS样式里面加个属性 background:url(图片路径/图片名) no-repeat;图片名的带上后缀，比如.jpg、.gif、.png等；也可以加成 background-image:url(图片路径/图片名) no-repeat;效果一样，起始也就是一回事，前面的是简写。
如果背景图的尺寸与DIV的尺寸不一样，那么就得考虑背景图是否需要铺满DIV，就得把no-repeat改为repeat，或者只在DIV的某一处显示，这样就得在no-repeat后面跟上位置参数，background:url(图片路径/图片名) no-repeat 距离左边的距离 距离上边的距离;只是使用的背景精灵技术。
具体你不明白的就Hi我；这个这样说页不是那么好理解的，实际把上面属性的文字换成你需要的值会更好理解，一点就明。
有问题Hi我。 参考技术B 首先你需要保证背景图片的比例与 div 一致，然后再给 div 加上：background-size: cover; -moz-background-size: cover; 应该就可以了。本回答被提问者采纳 参考技术C 添加的div的width，height和图片的一样大小，然后在css里该div属性下设置background-image：url（images/图片名字.jpg）

比如；
图片尺寸大小：1.jpg 1000*300
HTML代码： <div class="container">随便乱写几个字</div>
CSS属性： .cotainer
margin:0 auto; //居中展示
width:1000px;
height:300px;
background-image:url(1.jpg);

如何使透明文本忽略其父 div 背景颜色？

【中文标题】如何使透明文本忽略其父 div 背景颜色？

【英文标题】：How to make a transparent text ignore its parent div background-color?

【发布时间】：2021-12-30 12:17:49

【问题描述】：

我有一个带有背景颜色的容器 div，容器内有一个“按钮”div - 具有不同的背景颜色 - 以及“按钮”div 内的一个文本。

我的问题是：是否有可能使文本“继承”容器颜色，即使文本不是容器的孩子？

请只提供可能的解决方案，而不必求助于 JS。

CSS：

.container
  background-color: red;


.button
background-color: white;

HTML：

<div class="container">
  <div class="button">
   <a href="#">THE TEXT</a>
  </div>
</div>

给定的 CSS 和 HTML 只是我实际问题的一个示例，其中包含很多“按钮”和“容器”。

【问题讨论】：

使用 CSS 变量定义颜色？

@isherwood 我做到了。但由于我有很多 div，背景颜色不同，它会为每个容器中的每个按钮创建太多变量。我的目标是让我的 CSS 更简洁，并通过可能的单一或接近它的更改。

【参考方案1】：

一种方法是在容器中定义一个 CSS 变量，并使用它来设置容器背景颜色和锚元素的文本颜色。

这是可行的，因为从某种意义上说，孩子将“继承” CSS 变量（属性）的设置。

.container 
  --color: red;
  background-color: var(--color);
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;


.button 
  background-color: white;


.button a 
  color: var(--color);

<div class="container">
  <div class="button">
    <a href="#">THE TEXT</a>
  </div>
</div>

注意，在这个 sn-p 中，容器已经被赋予了一些样式，所以我们可以看到它。