背景图像不透明度但不是媒体查询中的文本
[英]Background Image opacity but not text in media query
问题描述
经历了很多类似的堆栈问题，但似乎没有解决我的问题。 就像问题说我想要图像的不透明度，但不是下一个。 我有另一个 div 中的所有文本，但它仍然给文本不透明度，我相信这是由于父级仍然具有不透明度。 就我而言，我希望在常规屏幕上没有不透明度，而在移动设备上有不透明度。
我看到了一个例子，给出了一个平面白色图像的背景 url 图像，但我无法复制它（见下文）
背景：url（白色图像）中心中心重复；
$(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>
3 个解决方案
解决方案1
2 2017-10-09 20:15:48
解决方案2
0 2017-10-09 20:19:17
您的文本是带有图像的 div 的子元素，因此对图像应用不透明度也会将其应用到其子元素。 您可以通过将要位于图像上方的所有文本元素和按钮包装在一个 div 中来解决此问题，该 div 不是图像 div 的子级，并使该 div position: absolute ，以便您可以将其移动到图像上方。 然后您可以设置图像的不透明度，而无需更改文本的不透明度。
解决方案3
0 2017-10-09 23:37:01
所以我找到了一种通过提供白色图像层来做到这一点的方法。 我也重新安排了一些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>
隐藏带有图像作为背景的文本块的效果！ 不透明度的线性梯度？
[英]Hiding effect of block of text with image as background! linear gradient of opacity?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.