多个div的一张背景图片

Question

我想使用 1 个背景图像 (1366x768) 在多个 div 中使用。但如果我使用：

.my_divs{
 background-image: url("image.jpg");
}

每个 div 上只有图像的左上角。我想使用基于 div 位置的图像部分。我可以在 div 上使用透明度并将背景设置为

body

。

它会起作用，但就我而言，我已经将

background-image

用于

body

与另一张图像。

body{
 background-image: url("another_image.jpg");
}

有没有办法“透视”

body

并显示

html

背景图像？或者另一个 CSS 技巧？

编辑：添加简单示例

<style>
.mydivs{
    padding:30px;
    margin:30px;
    background-image: url("2.jpg");
}
body{
    background-image: url("1.jpg");
}
#container{
}
</style>
<body>
    <div id='container'>
        <div class='mydivs'>1</div>
        <div class='mydivs'>2</div>
        <div class='mydivs'>3</div>
    </div> 
</body>

Answer 1

我认为

background-attachment

属性可能适合你。

参见：http://www.w3.org/TR/CSS21/colors.html#background-properties

如果使用

background-attachment: fixed

，背景图像将固定为尊重视口。因此，如果将其应用于多个元素，就好像通过页面上的“镜头”查看背景图像。

如果您的页面有垂直滚动条，那么背景图像将随着内容移动而保持固定（这可能不适合您的设计）。

.bgdeco {
  width: 700px;
  height: 100px;
  margin: 30px;
  border: 1px solid yellow;
  background-image: url(http://placekitten.com/2000/700);
  background-attachment: fixed;
  background-position: top center;
}

<div class="bgdeco"></div>
<div class="bgdeco"></div>
<div class="bgdeco"></div>

Answer 2

如果您知道要跨越多少个 div，则可以通过一些简单的数学运算来使用

background-position

。看看这个小提琴。

Answer 3

HTML

<div id='container'>
<div id='divHead' class='mydivs'>&nbsp;</div>
<div id='divTorso' class='mydivs'>&nbsp;</div>
<div id='divLegs' class='mydivs'>&nbsp;</div>
</div>

CSS

#container {
background-image:url('myPic.jpg');
}
.mydivs {
background-color:transparent;
}

Answer 4

是的，您可以为任何 HTML 标签（包括正文）设置透明背景！您可以通过多种方式实现您的目标..

将背景图像添加到 HTML 标签并将
```
background: none;
```
设置为正文和所有前导标签
您可以为所有想要设置单个的div添加一个父div 图像背景，然后将
```
background-image
```
添加到父 div 并设置所有 chind div 的
```
background: none;
```

查看下面的示例

html, body {
  padding: 0px;
  margin: 0px;
  }
body {
  background: red;
  }

#parent {
  background: url('http://thumb7.shutterstock.com/display_pic_with_logo/996335/251280085/stock-vector-abstract-polygonal-space-low-poly-dark-background-with-connecting-dots-and-lines-connection-251280085.jpg');
  background-size: cover;
  margin: 10px;
  padding: 10px;
  display: block;
  float: left;
  }
.child {
  display: block;
  float: left;
  width: 100px;
  height: 100px;
  font-size: 40px;
  color: #fff;
  border: 2px solid #ccc;
  margin: 5px;
  }

<div id="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
</div>

Answer 5

这不一定是一个好的解决方案 - 但如何设置内部 div 的边框而不是边距：边框将不透明并覆盖背景图像，内部 div 将透明并显示背景图像。您可以在 vw 和 vh 中设置边框以使它们具有响应能力。

.inner-divs {
    width: 20%;
    height: 100%;
    background-color: transparent;
    border: rgb(255, 255, 255) solid 5vw;
}

Answer 6

您可以使用

background-position: xpos ypos;

调整图像的位置。

多个div的一张背景图片

问题描述投票：0回答：6

6个回答

最新问题

多个div的一张背景图片

问题描述 投票：0回答：6

6个回答

最新问题

问题描述投票：0回答：6