亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS中背景圖片透明度問題小結(jié)

青蒔吖   發(fā)布時間：2024-06-25 16:14:22   作者：佚名   我要評論
今天使用CSS設(shè)計一個后臺頁面，在插入背景圖片后，設(shè)置透明度時，發(fā)現(xiàn)使用opacity設(shè)置透明度時，里面的文字內(nèi)容也會隨著背景一起變透明，今天給大家分享實例代碼，感興趣的彭一起看看吧

今天使用CSS設(shè)計一個后臺頁面，在插入背景圖片后，設(shè)置透明度時，發(fā)現(xiàn)使用opacity設(shè)置透明度時，里面的文字內(nèi)容也會隨著背景一起變透明
效果如下圖

于是在百度上找了很多方法，記錄一下，方便以后使用

1.背景毛玻璃效果

通過偽類選擇器before為背景添加透明效果，文字使用的仍時添加效果前的樣式

    .demo1{
        width: 500px;
        height: 300px;
        line-height: 50px;
        text-align: center;
    }
    .demo1:before{
        background: url(http://csssecrets.io/images/tiger.jpg) no-repeat;
        background-size: cover;
        width: 500px;
        height: 300px;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;/*-1 可以當背景*/
        -webkit-filter: blur(3px);
        filter: blur(3px);
    }

2.背景半透明效果

此方法通過在文字所在的div上面設(shè)置透明度，不改變背景的透明度
當兩個盒子重疊時，就會實現(xiàn)下面圖片的效果

.demo2-bg{
    background: url("img/htbg1.jpg") no-repeat;
    background-size: cover;
    width: 500px;
    height: 300px;
    position: relative;
}
.demo2{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 500px;
    height: 300px;
    line-height: 50px;
    text-align: center;
    background:rgba(255,255,255,0.3);
}

到此這篇關(guān)于CSS中背景圖片透明度問題的文章就介紹到這了,更多相關(guān)css背景圖片透明度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • CSS如何只改變父元素背景透明度不改變子元素透明度

    使用css的opcity屬性改變某個元素的透明度，但是其元素下的子元素的透明度也會被改變，即便重定義也沒有用，不過有個方法可以實現(xiàn)，大家可以看看
    2014-10-17

  • 詳解CSS-opacity子元素繼承父元素透明度的解決方法

    這篇文章主要介紹了詳解CSS-opacity子元素繼承父元素透明度的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面
    2020-09-08

  • 詳解css透明度之rgba和opacity的區(qū)別及兼容

    對于設(shè)置透明度，我們有兩個可以選的css3屬性：rgba 和 opacity。這篇文章主要介紹了詳解css透明度之rgba和opacity的區(qū)別及兼容，感興趣的可以一起跟隨小編來了解一下
    2019-01-10

  • CSS鼠標點擊改變圖片透明度

    這篇文章主要為大家詳細介紹了CSS鼠標點擊改變圖片透明度，為大家提供改變圖片css透明度屬性的簡單方法，感興趣的小伙伴們可以參考一下
    2016-03-08

  • CSS3中的Opacity多瀏覽器透明度兼容性問題

    用來設(shè)定元素透明度的 Opacity 是CSS 3里的一個屬性。當然現(xiàn)在還只有少部分瀏覽器支持，不過各個瀏覽器都有自己的私有屬性來支持,其中包括老版本的Mozilla和Safari
    2015-11-09

  • css中filter:alpha透明度使用小結(jié)兼容IE、火狐

    使用Alpha可以設(shè)置透明度，F(xiàn)ILTER:alpha在IE下是沒有問題的，要支持firefox就需要使用-moz-opacity，下面有個不錯的示例，大家可以參考下
    2014-03-27

  • CSS樣式設(shè)置元素的透明度以50%為例

    CSS樣式設(shè)置元素的透明度的方法有很多，不過兼容各種瀏覽器就屈指可數(shù)了，下面以將透明度設(shè)置為50%舉例，向大家介紹下，感興趣的朋友不要錯過
    2013-10-12

  • CSS 圖像透明度opacity兼容性介紹

    CSS 圖像透明度opacity想必大家并不陌生吧，使其可以讓圖片或者頁面擁有透明效果，下面為大家講解下CSS opacity的使用及其兼容性，感興趣的朋友可以參考下
    2013-09-08

  • 用CSS實現(xiàn)的圖片透明度鏈接效果代碼

    一款使用CSS的Alpha透明度實現(xiàn)的圖片鏈接效果，鼠標放上后圖片會變?yōu)榘胪该?，然后出現(xiàn)文字介紹，+可以加入其它功能，一般是加入收藏，根據(jù)你的需要了，可以自己改
    2011-12-20

最新評論