Answers:
这里是:
.background {
background:url('../img/bg/diagonalnoise.png');
position: relative;
}
.layer {
background-color: rgba(248, 247, 216, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
对此的HTML:
<div class="background">
<div class="layer">
</div>
</div>
当然.background
,如果其中没有其他元素,则需要为该类定义宽度和高度
我知道这是一个非常老的线程,但是它显示在Google的顶部,所以这是另一个选择。
这是纯CSS,不需要任何额外的HTML。
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
框阴影功能的用途令人惊讶。
box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .2)
。
从CSS-Tricks开始... ...只有一种方法可以做到这一点,而无需z-indexing和添加伪元素-需要线性渐变,我认为这意味着您需要CSS3支持
.tinted-image {
background-image:
/* top, transparent red */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* your image */
url(image.jpg);
}
background-size:cover;
并background-position:center center;
着手这个元素。这似乎抵消了这种影响。
您还可以使用线性渐变和图像:http : //codepen.io/anon/pen/RPweox
.background{
background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
url('http://www.imageurl.com');
}
这是因为线性渐变函数会创建一个图像,该图像会添加到背景堆栈中。https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient
然后,您需要一个带有bg图像的包装元素,以及一个带有bg颜色的content元素:
<div id="Wrapper">
<div id="Content">
<!-- content here -->
</div>
</div>
和CSS:
#Wrapper{
background:url(../img/bg/diagonalnoise.png);
width:300px;
height:300px;
}
#Content{
background-color:rgba(248,247,216,0.7);
width:100%;
height:100%;
}
试试这个。为我工作。
.background {
background-image: url(images/images.jpg);
display: block;
position: relative;
}
.background::after {
content: "";
background: rgba(45, 88, 35, 0.7);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.background > * {
z-index: 10;
}
我将这种方法用作在图像上应用颜色色调和渐变的一种方法,以便在您无法控制图像颜色配置文件时,使动态叠加文字的样式易于辨认。您不必担心z-index。
的HTML
<div class="background-image"></div>
萨斯
.background-image {
background: url('../img/bg/diagonalnoise.png') repeat;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(248, 247, 216, 0.7);
}
}
的CSS
.background-image {
background: url('../img/bg/diagonalnoise.png') repeat;
}
.background-image:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(248, 247, 216, 0.7);
}
希望能帮助到你
div
至少具有一个位置即可:相对
请参阅https://stackoverflow.com/a/18471979/193494上的答案,以获取可能解决方案的全面概述:
为什么这么复杂?您的解决方案几乎是正确的,除了它是使图案透明和使背景颜色稳定的一种方法。PNG可以包含透明胶片。因此,通过将图层设置为70%并保存图像,可以使用photoshop使图案透明。然后,您只需要一个选择器。跨浏览器工作。
CSS:
.background {
background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
background-color: rgb(248, 247, 216);
}
HTML:
<div class="background">
...
</div>
这是基本的。下面是一个使用示例,其中我从切换到background
,background-image
但是两个属性的工作原理相同。
body { margin: 0; }
div {
height: 110px !important;
padding: 1em;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
color: white;
text-shadow: 0 0 2px #333;
}
.background {
background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */
}
.col-one {
background-color: rgb(255, 255, 0);
}
.col-two {
background-color: rgb(0, 255, 255);
}
.col-three {
background-color: rgb(0, 255, 0);
}
<div class="background col-one">
1. Background
</div>
<div class="background col-two">
2. Background
</div>
<div class="background col-three">
3. Background
</div>
请等一分钟!加载外部样式需要花费一些时间。
这个网站似乎很慢...
:hover
并将其叠加在背景图像上?
这是仅使用CSS的更简单的技巧。
<div class="background"> </div>
<style>
.background {
position:relative;
height:50px;
background-color: rgba(248, 247, 216, 0.7);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC);
}
.background:after {
content:" ";
background-color:inherit;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
另一个带有SVG的内嵌重叠式图片(请注意:如果#
在svg代码内部使用,则必须对该代码进行urlencode!):
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/></svg>')
no-repeat center center/cover,
url('overlayed-image.jpg') no-repeat center center/cover;
我只是在目标背景div上使用了background-image css属性。
请注意,背景图片仅接受渐变颜色功能。
因此,我使用线性渐变两次添加了相同的所需叠加颜色(使用最后的rgba值来控制颜色不透明度)。
另外,找到这两个有用的资源来:
的HTML
<div class="header_div">
</div>
<div class="header_text">
<h1>Header Text</h1>
</div>
的CSS
.header_div {
position: relative;
text-align: cover;
min-height: 90vh;
margin-top: 5vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100vw;
background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
filter: blur(2px);
}
.header_text {
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
}
您还可以为覆盖颜色添加不透明度。
而不是做
background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
你可以做:
background: url('../img/bg/diagonalnoise.png');
然后为不透明度颜色创建新样式:
.colorStyle{
background-color: rgba(248, 247, 216, 0.7);
opacity: 0.8;
}
将不透明度更改为低于1的任意数字。然后使该颜色样式与图像的大小相同。它应该工作。