怎么用css中:after偽元素實現(xiàn)背景圖片的疊加層

這篇文章主要介紹了怎么用css中:after偽元素實現(xiàn)背景圖片的疊加層，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)2013年開創(chuàng)至今，先為濰城等服務(wù)建站，濰城等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為濰城企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

由于我不想為修飾引入新標記，我們將使用CSS::after偽元素。

我們可以通過以下過程來實現(xiàn)。

1、為你所需要的區(qū)域創(chuàng)建最簡單的HTML

2、使用::before或::after元素創(chuàng)建背景圖

3、使用z-index修改絕對定位導(dǎo)致的問題

4、可以嘗試使用mix-blend-mode實現(xiàn)一些有趣的效果

第1步：你需要的是沒有任何多余標記的背景圖

在背景圖中，我們真正想要的只是背景圖作為容器以及背景圖需要包含的任何內(nèi)容。

<sectionclass="banner">

<h2>HelloWorld</h2>

</section>

360截圖20181102145006305.jpg

在這個例子中，我們只使用一個section容器和一個<h2>。如果您添加了更多內(nèi)容，它可能是同級元素，<h2>或者您可以將所有內(nèi)容放在某種內(nèi)容容器中進行隨意定位。

這里有一個小“魔法”，可以增加背景圖的高度以及文本的中心位置。這對于本篇內(nèi)容境界并不重要，但是如果你很好奇，可以自己試一試。

第2步：使用::after動態(tài)添加疊加元素

CSS為我們提供的::before和::after元素有強大的功能，用于向不該影響標記的頁面添加樣式內(nèi)容。

通過應(yīng)用::before或::after元素，您可以在選定元素子元素之前或之后將動態(tài)元素插入DOM。

一個重要的注意事項是，所有偽元素都需要content顯示CSS屬性。雖然在我們的例子中，content只是一個空白字符串。

.banner::after{

content:"";//::beforeand::afterbothrequirecontent

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background-image:linear-gradient(120deg,#eaee44,#33d0ff);

opacity:.7;}
   

感謝你能夠認真閱讀完這篇文章，希望小編分享的“怎么用css中:after偽元素實現(xiàn)背景圖片的疊加層”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

本文名稱：怎么用css中:after偽元素實現(xiàn)背景圖片的疊加層
網(wǎng)頁路徑：http://muchs.cn/article38/ghidsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站排名、網(wǎng)站營銷、域名注冊、做網(wǎng)站、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)