背景圖像不透明度但不是媒體查詢中的文本
[英]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.