添加過濾器或透明的PNG在用戶提交的背景圖像

-1

尋找在修改WordPress的頁面模板，讓用戶提交一個場地上的列表/後和包括用作背景圖像的圖像援助。問題是，當用戶使用名爲「listing_banner」的自定義字段提交圖像時，根據用戶提交的列表提交的背景圖像，提交的圖像可能會使得難以從背景圖像中讀取白色文本。下面是一個示例清單的鏈接：http://www.myvipclubs.com/test/city/detroit/listing/v-at-mgm-grand-detroit/添加過濾器或透明的PNG在用戶提交的背景圖像

尋找援助，以添加以下到現有的代碼中的一個：

是指包括WordPress的自定義CSS文件的附加div標籤CSS元素指向一個透明圖像（.png），當用戶提交背景圖像（http://www.myvipclubs.com/test/submit-listing/）時，它可以放置在listing_banner圖像的前面。問題：使用div class .full_detail_overlay_image時，透明圖像覆蓋了listing_banner圖像和文本。只希望圖像變暗，而不是文字。假設需要有一個類來清除CSS樣式並且不會影響文本。
修改現有的CSS。樣式用於背景圖像（.full_width_detail），其中包含用於更改用戶提交的任何圖像的過濾器。

使用任何可能的解決方案尋找某人協助使用css或透明圖像獲取正確的代碼作爲覆蓋。

來源

2015-09-27 Peter A Vazquez

你並不需要一個額外的div元素，你可以通過使用一個前或僞元素之後做到這一點。

我用下面的CSS很快組建一個例子jsFiddle。

.full_width_detail:before { 
    height: 600px; 
    background-image: url(http://images4.fanpop.com/image/photos/16100000/Cute-Kitten-kittens-16122946-1280-800.jpg); 
    background-size: cover; 
    position:relative; 
    padding: 50px; 
} 
.full_width_detail:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    left: 0; 
    top: 0; 
    background: rgba(0, 0, 0, 0.15); 
    z-index: 1 
} 

h1 { 
    text-align:center; 
    color: #fff; 
    z-index: 2; 
    position: relative; 
}

你需要確保你的div元素的相對定位和僞元素.full_width_detail：之前絕對定位和比格的給定的z-index較高，使其位於上方。

在這個例子中我使用一個RGBA背景爲：元素之前。 .15值當然可以改變，以使色調更不透明，如果你想。如果你真的必須使用透明png而不是rgba背景，但是我個人喜歡使用rgba，如果我需要支持舊版瀏覽器的話可以回退一下。

的div在這種情況下的內容的文本需要被相對定位，並具有z軸折射率比.full_width_detail更高：前。

來源

2015-09-27 16:17:47 UntitledGraphic

你的例子給了我們我們需要的東西。 z-index和僞元素.full_width_detail：之前絕對是拼圖的缺失部分。感謝您幫助我們。 –

添加過濾器或透明的PNG在用戶提交的背景圖像

回答

相關問題