1. <i id="s6b2k"><small id="s6b2k"></small></i>
    <b id="s6b2k"><bdo id="s6b2k"></bdo></b>
  2. <wbr id="s6b2k"></wbr>

    css3實現背景圖片半透明內容不透明的方法示例_CSS教程_CSS_網頁制作

    來源:腳本之家  責任編輯:小易  

    上一個博客做登陸的頁面是遇到的問題,突然想使用這種背景圖片透明,而內容不透明的效果,這里我就說一說我的兩個思路吧。

    效果展示:

    內容半透明

    在這里插入圖片描述 

    內容不透明

    在這里插入圖片描述

    最常見的做法事設置元素的opacity,這種設置出來的效果就是內容與背景都事半透明的,嚴重影響視覺效果,達不到上述的效果

    方法一:設置background-color:rgba(),這種方式只能設置背景顏色的透明度。

    如果是背景是圖片的上面的方法將就不適用,以下提供兩個方法:

    第一個就是利用偽元素::before,我們通過給偽元素添加背景并且將偽元素的設置偽元素的背景透明度來實現

    .login_box::before{
                content:"";
               
                background-image:url(images/one.jpg);
                opacity:0.5;//透明度設置
                z-index:-1;
                background-size:500px 300px;
                width:500px; 
                height:300px;
                position:absolute;
                //一定要設置position:absolute,這樣才能設置z-index,讓背景處于內容的下一層
                top:0px;
                left:0px;
                border-radius:40px;
            }
             .login_box{
                position:fixed;
                left:50%;
                top:200px;
                width:500px;
                height:300px;
                margin-left:-250px;
                border-radius:40px;
                box-shadow: 10px 10px 5px #888;
                border:1px solid #666;
     
                text-align:center;
            }
    

    方法與偽元素異曲同工,我們可以通過設置不通的div,里面的div放置內容,父級div設置背景,然后給它設置透明度,大概布局如下:

    <div class="bg">
        <div class="content">
        內容
        </div>
    </div>

    這樣也可以達到同樣的效果

    到此這篇關于css3實現背景圖片半透明內容不透明的方法示例的文章就介紹到這了,更多相關css3背景圖片半透明內容不透明內容請搜索真格學網以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持真格學網!


  3. 本文相關:
  4. css3實現背景圖片顏色修改的多種方式
  5. css3制作的背景漸變動畫效果
  6. css3實現模糊背景的三種效果示例
  7. css3 菱形拼圖實現只旋轉div 背景圖片不旋轉功能
  8. css3只讓背景圖片旋轉180度的實現示例
  9. 基于css3制作的圓形透明畫中畫視頻播放特效
  10. js+css3文章內容背景黑白切換特效代碼
  11. css3實現簡單的白云飄動背景特效
  12. css3 實現的動態星空背景
  13. div+css如何實現背景半透明內容不透明
  14. CSS 圖片半透明,文字不透明顯示
  15. Css實現背景圖片半透明效果。
  16. 如何用JS或CSS來實現網頁背景半透明
  17. 如何用css改變div的背景圖或背景色透明度,并且div...
  18. css里怎么給背景圖片變透明點 給圖片的div加什么代...
  19. 請教CSS如何實現內容和邊框不透明,而背景透明
  20. 用CSS做網頁是不是背景圖片不能設置半透明?
  21. css3如何將圖片背景透明化
  22. css怎么可以只讓背景透明 文字不透明
  23. 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全主頁網頁制作csscss教程css3背景圖片半透明內容不透明css3 菱形拼圖實現只旋轉div 背景圖片不旋轉功能css3 實現的動態星空背景css教程css3div+css教程web標準教程瀏覽器兼容教程css布局實例css控制ul li 的樣式詳解(推薦)html設置超鏈接字體顏色和點擊后的字體顏色div水平垂直居中的完美解決方案css設置各種中文字體如雅黑、黑體、宋體、楷體等等css 文本字體顏色設置方法(css color)css 漂亮搜索框美化代碼css自定義select下拉選擇框的樣式(不用其他標簽模擬)css圓角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行縮進兩個文字用css實現圖片的3d凹凸感(凸出鏡框外或凹陷鏡框里)巧用 -webkit-box-reflect 倒影實現各類動效(小結)在css中映射鼠標位置并實現通過鼠標移動控制頁面元素css實現文章分割線樣式的多種方法總結純css實現hover圖片pop-out彈出效果的實例代碼css新增的:where和:is偽類函數是什么css3實現背景圖片半透明內容不透明的方法示例純css實現酷炫的霓虹燈效果(附demo)淺談移動端中的視口(viewport)的具體使用老生常談 使用 css 實現三角形的技巧(多種方法)
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.yu113.com All Rights Reserved
    战天txt全集下载