经历了很多类似的堆栈问题，但似乎无法解决我的问题。就像问题所说的那样，我希望图像不透明，而不是下一个。我有所有文本在另一个div内，但它仍然给文本不透明，我相信它是由于父母仍然具有不透明度。在我的情况下，我希望在常规屏幕和移动设备上没有不透明度具有不透明度。
我看到了一个给出背景网址图像的示例，该图像是平面白色图像，但我无法复制它（见下文）
背景：网址（白色图片）中心重复;
$(document).ready(function(){
$('.home-slick-slider').slick({
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
cssEase: 'linear',
arrows: true,
dots: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
dots: true,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
dots: true,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
dots: true,
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
});.home-slick-slider>.slick-prev:before {
background-image: url('../images/chevron-left.png');
background-size: 50px 100px;
display: inline-block;
width: 50px;
height: 100px;
content:"";
}
.home-slick-slider>.slick-next:before {
background-image: url('../images/chevron-right.png');
background-size: 50px 100px;
display: inline-block;
width: 50px;
height: 100px;
content:"";
}
.home-slick-slider>.slick-prev {
left: 20px;
z-index: 1;
}
.home-slick-slider>.slick-next {
right: 50px;
z-index: 1;
}
.home-slick-text{
text-align: right;
margin-right: 10%;
padding-top: 5%;
}
.home-slick-text h2{
font-size: 52px;
line-height: 50px;
letter-spacing: 8px;
color: #5d7375;
text-transform: uppercase;
zoom: 1;
}
.home-slick-text p{
font-size: 16px;
line-height: 26px;
float: right;
clear: both;
width: 40%;
color: #5d7375;
zoom: 1;
}
.home-slick-text button{
float: right;
clear: both;
line-height: 20px;
zoom: 1;
background: #60bc02;
border: 1px solid #60bc02;
color: white;
width: 10%;
height: 58px;
font-weight: bold;
font-size: 20px;
border-radius: 3px;
}
@media only screen and (max-width: 1079px)
{
.home-slick-content{opacity: 0.5; }
.home-slick-text h1{opacity: 4 !important}
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<body>
<div class="home-slick-slider">
<div class="home-slider-slides">
<div class="home-slider-content">
<div class="home-slick-content" style="background: url(http://www.baptistphysicianpartners.com/Sitefinity/WebsiteTemplates/BPP/App_Themes/Default/global/images/a-quality-connection-slide.jpg);width: 100%;height:450px;background-size: 100% 100%;">
<div class="home-slick-text">
<h2>A Quality<br>Connection</h2>
<p>Baptist Physician Partners is a physician-led, clinically integrated network committed to improving the quality of patient care in Northeast Florida.</p>
<button type="button">Apply Now</button>
</div>
</div>
</div>
</div>
<div class="home-slick-content">
<div class="home-slick-content" style="background: url(http://www.baptistphysicianpartners.com/Sitefinity/WebsiteTemplates/BPP/App_Themes/Default/global/images/a-quality-connection-slide.jpg);width: 100%;height: 450px;background-size: 100% 100%;">
<div class="home-slick-text">
<h2>A Quality<br>Connection</h2>
<p>Baptist Physician Partners is a physician-led, clinically integrated network committed to improving the quality of patient care in Northeast Florida.</p>
<button type="button">Apply Now</button>
</div>
</div>
</div>
</div>
</body>
答案 0 :(得分：2)
如果您想使背景颜色透明，但保留文字不透明度，则可以使用rgba颜色。
background-color: rgba(255, 255, 255, 0.5);
如果要对实际图像执行此操作，可以将图像另存为具有不透明度的PNG。这是supported in all modern browsers。
否则，您必须将stack two separate elements置于彼此之上（而不是正确嵌套它们），以避免影响带有文本的元素的不透明度。
答案 1 :(得分：0)
您的文字是图片中div的子元素，因此对图像应用不透明度也会将其应用于其子图层。您可以通过将所有想要位于图像上方的文本元素和按钮包装在div（这不是图像div的子元素）中来修复此问题，然后将此div position: absolute设置为，以便将其移动到图片。然后，您可以设置图像的不透明度，而无需更改文本的不透明度。
答案 2 :(得分：0)
所以我找到了一种通过提供白色图像层来实现此目的的方法。我已经安排了一些HTML以及
@media only screen and (max-width: 1079px)
{
.home-slick-content{
background: url(http://www.baptistphysicianpartners.com/Sitefinity/WebsiteTemplates/BPP/App_Themes/Default/global/images/white-trans-overlay.png);
background-size: 100% 100%;
height: 450px;
}
}<body>
<div class="home-slick-slider">
<div class="home-entire-slide-content"style="background: url(http://www.baptistphysicianpartners.com/Sitefinity/WebsiteTemplates/BPP/App_Themes/Default/global/images/a-quality-connection-slide.jpg);width: 100%;height:450px;background-size: 100% 100%;">
<div class="home-slick-content">
<div class="home-slick-text" >
<h2>A Quality<br>Connection</h2>
<p>Baptist Physician Partners is a physician-led, clinically integrated network committed to improving the quality of patient care in Northeast Florida.</p>
<button type="button">Apply Now</button>
</div>
</div>
</div>
<div class="home-entire-slide-content"style="background: url(http://www.baptistphysicianpartners.com/Sitefinity/WebsiteTemplates/BPP/App_Themes/Default/global/images/a-quality-connection-slide.jpg);width: 100%;height:450px;background-size: 100% 100%;" >
<div class="home-slick-content">
<div class="home-slick-text" >
<h2>A Quality<br>Connection</h2>
<p>Baptist Physician Partners is a physician-led, clinically integrated network committed to improving the quality of patient care in Northeast Florida.</p>
<button type="button">Apply Now</button>
</div>
</div>
</div>
</div>
</body>