我需要的最终结果背景图片:
我用过的背景图片:
但我有 Fiddle
::小提琴摘要::
HTML ...
<div id="top-part">
<div id="topmost">
<div id="top-most" class="wrapper">
</div>
</div>
<div id="topmenu" class="wrapper">
</div>
... CSS
.wrapper{
position: relative;
width: 943px;
margin: 0 auto;
}
#top-part{
background: url(img/bg-header-effects.png) no-repeat top center;
}
#topmost{
background: #900;
opacity: 0.8;
}
#top-most{
height: 139px;
}
#topmenu{
background: #900;
opacity: 0.8;
height: 51px;
border-radius: 0 0 20px 20px;
}
答案 0 :(得分:11)
#header{
background: #f00 url('http://i.stack.imgur.com/GWVfL.jpg');
opacity: .6;
width: 100%;
height: 189px;
}
您可以尝试使用CSS中的background
属性:
div{
background: url('path_to_your_image.jpg') no-repeat;
}
Learn more about using the background-image
property here
注意:强>
background
和background-image
之间存在差异。在这个答案中,我使用了background
属性,该属性基本上采用了CSS中背景图像的所有可能选项,并允许它们在一次调用中使用。
例如,您可以将上面的内容拆分为两个选择器:
div{
background-image: url('path_to_your_image.jpg') no-repeat;
background-repeat: no-repeat;
}
答案 1 :(得分:4)
你可以这样做 this fiddle
HTML ...
<div id="top-part">
<div id="topmost">
</div>
</div>
<div id="top-menu" class="wrapper">
<div id="topmenu">
</div>
</div>
...的CSS
.wrapper{
position: relative;
width: 943px;
margin: 0 auto;
}
#top-part{
background: url(img/bg-header-effects.png) no-repeat top center;
}
#topmost{
background: #900;
opacity: 0.8;
height: 139px;
}
#top-menu{
background: url(img/bg-header-effects.png) no-repeat 50% 45%;
border-radius: 0 0 20px 20px;
}
#topmenu{
background: #900;
opacity: 0.8;
height: 51px;
border-radius: 0 0 20px 20px;
}
答案 2 :(得分:0)
我想到的简单方法是在div中覆盖整个页面的图片。代码将非常简单,但唯一的缺点是图像可能会扭曲,或者可以点击它,除非你有这个。
HTML:
<div id="backgroundcolor">
<div id="backgroundimage">
</div>
</div>
CSS:
#backgroundcolor {
background-color: #000;
z-index: 1;
}
#backgroundimage {
background: ("http://cdn.theatlantic.com/static/infocus/election110712/s_e01_37923312.jpg");
resize: none;
object-position: center;
object-fit: initial;
}