如何更改元素的不透明度/透明度并保持人体背景图像仍然可见？
[英]How to change element's Opacity / Transparency and keep body background-image still visible?
问题描述
I m new at coding and first question to ask here. 
我是编码新手，这里有第一个问题要问。
This is first time that I was unable to find an answer online, maybe because I am unable to explain/describe it well. 这是我第一次无法在线找到答案，可能是因为我无法很好地解释/描述它。 But here I am able to post a picture. 但是在这里我可以发布图片。
Exactly what I want do make. 正是我想要做的。 This dark shade background of an element but to keep body background still visible 元素的这种深色背景，但保持主体背景仍然可见
Can you please help me how can I do this in CSS? 您能帮我在CSS中怎么做吗？
Many thanks! 非常感谢！
4 个解决方案
解决方案1
2 已采纳 2017-01-04 16:54:41
You can set background for the element: background-color: rgba(0,0,0,0.5); 您可以为元素设置背景：background-color：rgba（0,0,0,0.5）; Pay attention at 0.5. 注意0.5。 It run from 0 to 1. More high more dark. 从0到1。越高，越暗。
解决方案2
2 2017-01-04 17:03:18
- create a div with position absolute 创建绝对位置的div
- set it's background-color as black 将其背景色设置为黑色
- set it's opacity as 0.5(adjust opacity as you required,which determine your transparency level). 将其不透明度设置为0.5（根据需要调整不透明度 ，这将决定您的透明度级别）。
html{ width:100%,height:100%; } body{ background-image: url(https://i.stack.imgur.com/wwy2w.jpg); height:100%; width:100%; background-size:cover; } #black-box{ position:absolute; background-color:black; opacity:0.5; width:50%; top:10%; left:10%; height:50%; }
<body> <div id="black-box"></div> </body>
解决方案3
1 2017-01-04 17:05:58
You need a div for the background image, which I have added, you then need another div in order to vertical align the content, similar to your example and finally a third div that will hold the content. 您需要为背景图像添加一个div，然后再添加一个div，以使内容垂直对齐（类似于您的示例），最后需要一个包含内容的第三个div。
HTML: HTML：
<div class="background">
<div class="background-module">
<div class="background-info">
<h1>Hello</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non imperdiet enim. Aenean eget dolor in risus aliquam pellentesque. Ut porta nec ex vel tincidunt. Maecenas varius accumsan posuere. Donec non blandit ipsum. Duis vel eros nunc. Donec aliquam ac ipsum et ultrices.</p>
<form>
<input type="email" />
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
CSS: CSS：
.background {
background:url("https://9to5mac.files.wordpress.com/2016/06/sierra-2.jpg?quality=82&strip=all") no-repeat center top;
background-size: cover;
height:800px; /* this can be anything */
display:table; /* required to vertically align the content */
width:100%;
}
.background-module {
display:table-cell; /* required to vertically align the content */
vertical-align:middle; /* required to vertically align the content */
}
.background-info {
background:rgba(0, 0, 0, 0.5); /* required to create the opacity look in your example */
padding: 15px;
text-align: center;
width:50%;
margin:0 auto;
}
Here is a link to a working fiddle > https://jsfiddle.net/czy5ycsr/ 这是一个有效的小提琴的链接> https://jsfiddle.net/czy5ycsr/
解决方案4
1 2017-01-04 17:06:03
You can try something like this 你可以尝试一些像这样的
HTML: HTML：
<div class="container">
<div class="inner">
<div class="content">
<p>Content</p>
<div class="overlay"></div>
</div>
</div>
</div>
CSS: CSS：
.container {
width:1400px;
background: white url(http://lorempixel.com/1400/1200/nature/1/) no-repeat center;
height: 400px;
padding: 50px 0;
margin : 20px auto;
}
.content {
display:block;
width: 50%;
height: 200px;
background:transparent;
margin: 0 auto;
position:relative;
}
.overlay {
width:100%;
height:200px;
background: rgba(0,0,0,0.7);
position:absolute;
left:0;
top:0;
z-index: 0;
}
p {
padding: 20px;
color: #FFFFFF;
position: relative;
z-index: 1;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.