DIV 半透明層、 CSS實現網頁 背景半透明

前些天發現了一個巨牛的人工智能學習網站,通俗易懂,風趣幽默,忍不住分享一下給大家。點擊跳轉到教程。

DIV半透明實現,使用CSS實現DIV成半透明效果,CSS實現層與背景半透明效果。

一、DIV CSS半透明基礎介紹 ? - ??

設置DIV半透明CSS代碼:

div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity:?0.5;}?

說明:
1、filter:對win IE設置半透明濾鏡效果,filter:alpha(Opacity=80)代表該對象80%半透明,火狐瀏覽器不認
2、-moz-opacity:對mozilla firefox火狐瀏覽器實現半透明,win IE不認此屬性,-moz-opacity:0.5相當于設置半透明為50%
3、opacity:對除IE外所有瀏覽器支持包括谷歌,放最后主要針對谷歌瀏覽器,opacity: 0.5;表示設置50%半透明

為了觀察到對DIV半透明實現,我們設置兩個DIV層,分別一個放于另外一個DIV層內,外層DIV命名為“.div-a”;上面被包含的層CSS類命名為“.div-b”,形成“.div-b”盒子放于“.div-a”內

我們對底層DIV設置一個背景是一張圖片,上面的DIV盒子設置村黑色。

二、未設置半透明樣式實例 ? - ??

1、根據描述實例,未設置半透明HTML源代碼:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>半透明實例在線演示 www.divcss5.com</title> 
<style> 
.div-a{ background:url(div-a-bg.png) no-repeat;width:230px;height:136px;padding:10px;} 
.div-b{ background:#000;width:200px;height:100px;padding:5px;color:#F00} 
</style> 
</head> <body> 
<div class="div-a"> 
<div class="div-b">DIV半透明實例演示</div> 
</div> 
</body> 
</html> 

2、未設置半透明CSS樣式截圖:

未設置半透明時截圖
未設置半透明樣式?未實現半透明實例瀏覽器中效果截圖

三、對DIV設置CSS半透明樣式實例 ? - ??

1、我們對“.div-b”選擇器加入半透明樣式代碼:

filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6; 
設置60%半透明效果

完整實例網頁HTML代碼如下:

2、在瀏覽器效果截圖:

css div半透明實現截圖
css+div實現半透明?瀏覽器中瀏覽實現DIV半透明效果截圖

總結:根據以上兩個實例,第一個沒有設置半透明樣式,另外一個設置半透明樣式而實現了div層半透明效果,大家可以根據需要調整半透明值,實現想要半透明度。設置半透明效果要考慮IE瀏覽器、谷歌、火狐等瀏覽器兼容支持,所以我們半透明樣式代碼務必完整。

再次記住需要半透明地方設置以下半透明代碼即可:

filter:alpha(Opacity=60);-moz-opacity:0.6;opacity:?0.6?

?

轉自:http://www.divcss5.com/css-hack/c574.shtml

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/448144.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/448144.shtml
英文地址,請注明出處:http://en.pswp.cn/news/448144.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

node 安裝 webpack

首先要安裝 Node.js&#xff0c; Node.js 自帶了軟件包管理器 npm&#xff0c;Webpack 需要 Node.js v0.6 以上支持&#xff0c;建議使用最新版 Node.js。 用 npm 安裝 Webpack&#xff1a; $ npm install webpack -g此時 Webpack 已經安裝到了全局環境下&#xff0c;可以通過命…

Thinking in C++遇到的函數指針及應用

// // Created by PC-Saw on 2019/1/24. //#include <iostream>#define TEST 2/* 1. */ typedef int* (*(*fp1)(int))[10]; // 首先是一個函數指針&#xff0c;接受一個int型參數&#xff0c;返回一個指向10個int指針數組的指針 /* 2. */ typedef i…

html 標簽內背景圖片自適應 div 大小

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 只需通過css設置background-size屬性為contain&#xff0c;即 background-size:contain 注意&#xff1a;一定要在先設置background之…

Code Project精彩系列(轉)

Code Project精彩系列&#xff08;轉&#xff09; Applications Crafting a C# forms Editor From scratch http://www.codeproject.com/csharp/SharpFormEditorDemo.asp 建立一個類似C#的環境, 實現控件拖拉&#xff0c;屬性 Packet Capture and Analayzer 網絡封包截獲 http…

加速時如何換擋

加速時如何換擋&#xff0c;您知道嗎?為了使換擋過程順利進行&#xff0c;變速器內齒輪平穩嚙合&#xff0c;必須掌握好發動機轉速&#xff0c;在適當時機推動變速桿操縱齒輪嚙合。為此&#xff0c;要通過反復練習&#xff0c;一邊踩踏油門踏板&#xff0c;一邊聽發動機運轉聲…

C++ 學習雜談:sizeof和sizeof(string)的問題

最近遇到一個令我困惑的問題&#xff0c;就是 sizeof&#xff08;string&#xff09;的值&#xff0c;之前在vs2010上測得是固定28&#xff0c;最近在用CLion&#xff0c;上面測得是4&#xff0c;出現了不一樣的結果&#xff0c;我又在vs2013上試了一下&#xff0c;結果又不一樣…

vue 項目 引用(外部) js、css

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 我的工程結構&#xff1a; 1. 引入 css 有 2 種方式&#xff1a; 方式 1 <script type"text/javascript">import .…

FAQ:Container Classes篇

1、Why should I use container classes rather than simple arrays?&#xff08;為什么應該使用容器類而不是簡單的數組&#xff1f;&#xff09; In terms of time and space, a contiguous array of any kind is just about the optimal construct for accessing a sequen…

自動擋車擋位的基本知識介紹

一般來說&#xff0c;自動檔汽車的自動變速器的檔位分為P、R、N、D、2 (或S)、L(或1)等。下面分別詳細介紹如下&#xff1a; P (Parking) 停車檔&#xff0c;或稱泊車檔&#xff1a; P用作停車之用&#xff0c;它是利用機械裝置去鎖緊汽車的轉動部分&#xff0c;使汽車不能移動…

Java 強引用、弱引用、軟引用、虛引用

1、強引用&#xff08;StrongReference&#xff09; 強引用是使用最普遍的引用。如果一個對象具有強引用&#xff0c;那垃圾回收器絕不會回收它。如下&#xff1a; Object onew Object(); // 強引用 當內存空間不足&#xff0c;Java虛擬機寧愿拋出OutOfMemoryError錯誤…

解決:(iptables failed: iptables --wait -t nat -A DOCKER -p tcp -d 0/0 --dport 8082 -j DNAT --to-destin

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 1. 用 docker 部署一個前端工程&#xff0c;run 后容器有了&#xff0c;卻不是運行狀態&#xff0c;是創建狀態&#xff0c;于是我執行 …

在DOS命令行執行MYSQL語句

最近有個工作需要從MSSQL庫中取數據然后導入SQL 2005。由于之前曾經做過利用BCP導入SQL&#xff0c;因此想借助這個工具實現此功能。 在探索過程中&#xff0c;好像發現MYSQL不能想SQL那樣有OSSQL這樣的外部命令。因此想到利用MYSQL執行文件內容的功能來生成導出數據。&#xf…

無損壓縮——Huffman編碼

最近項目中涉及到人臉關鍵點中神經網絡的壓縮&#xff0c;采用了性能較好的哈夫曼編碼進行。 源碼地址&#xff1a;https://github.com/believeszw/HuffmanCompress 1 引言 哈夫曼&#xff08;Huffman&#xff09;編碼算法是基于二叉樹構建編碼壓縮結構的&#xff0c;它是數據…

26條安全開車經驗 開車20年老司機分享

總有些人&#xff0c;覺得自己開車技術比舒馬赫牛叉&#xff0c;市區高速漂移無比瀟灑。也總有些人&#xff0c;覺得路是自家的鋪的&#xff0c;愛怎么開就怎么開&#xff0c;愛停哪就停哪&#xff0c;哪個不服打開車窗就是一句國罵一個中指。其實他們都沒有意識到&#xff0c;…

解決:Request header field Content-Type is not allowed by Access-Control-Allow-Headers

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 1. 前端 vue 工程 post 請求后端接口&#xff0c;報錯&#xff1a; Request header field Content-Type is not allowed by Access-Con…

書寫README的各種markdown語法

README 該文件用來測試和展示書寫README的各種markdown語法。GitHub的markdown語法在標準的markdown語法基礎上做了擴充&#xff0c;稱之為GitHub Flavored Markdown。簡稱GFM&#xff0c;GFM在GitHub上有廣泛應用&#xff0c;除了README文件外&#xff0c;issues和wiki均支持…

Apache2.4配置ssl

1》驗站 如下截圖&#xff0c;驗站就是在DNS域名商哪里&#xff0c;在對應host下面&#xff0c;添加一個TXT記錄類型&#xff0c;主機記錄&#xff0c;記錄值后&#xff0c;檢測即可。   2》SSL證書申請 阿里云&#xff0c;騰訊云有很多免費證書申請&#xff0c;免費的缺點是…

助你解決新手開車四大問題 為您支招

新手開車起步技巧涉及方方面面&#xff0c;對于新手來說&#xff0c;如何首次將車獨自開上路且不發生任何意外是眾多人熱切盼望的理想方式。但是新手上路難免會磕磕碰碰&#xff0c;發生小摩擦都是在所難免的&#xff0c;那么如何在起步階段就將發生事故的概率降到最低呢?在此…

VUE - get 、post 請求后端接口:get 、post 寫法 (Axios 中文說明文檔地址)

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 Axios 中文使用說明文檔地址&#xff1a;Axiox 中文說明文檔 我只是記錄下寫法&#xff0c;兩種請求都能正常運行&#xff1a; 1. 安裝…

C++11新特性——移動語義,右值引用

移動語義 有一些類的資源是__不可共享__的&#xff0c;這種類型的對象可以被移動但不能被拷貝&#xff0c;如&#xff1a;IO 或 unique_ptr 庫容器、string 和 shared_ptr 支持拷貝和移動&#xff0c;IO 和 unique_ptr 則只能移動不能拷貝。。 右值引用 右值引用是必須綁定到…