css實現背景透明文字不透明

阿新 • • 發佈：2019-02-18

我們所說的設定透明度實際上是設定不透明度

使用opacity會導致背景和圖片都透明，在此處不合適

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3的rgba</title>
<style>
*{
    padding: 0;
    margin: 0;
}
body{
    padding: 50px;
}
.demo{
  padding: 25px;
  background-color:red;/* IE6和部分IE7核心的瀏覽器(如QQ瀏覽器)下顏色被覆蓋 */ 

  /*background-color:rgba(0,0,0,0.2); *//* IE6和部分IE7核心的瀏覽器(如QQ瀏覽器)會讀懂，但解析為透明 */
 opacity: 0.5;
}
.demo p{
    color: black;
}
</style>
</head>
<body>    

<div class="demo">
    <p>使用opacity時，p繼承了demo的opacity</p>
</div>

</html>

這裡寫圖片描述

使用css3中的rgba：

r: red,取正整數或者百分數;
g:green，取正整數或者百分數;

b:blue，取正整數或者百分數;
a:alpha，取0~1之間的數

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3的rgba</title>
<style>
*{
    padding: 0;
    margin: 0;
}
body{
    padding: 50px;
}
.mydemo{
    padding: 25px;  
    background-color: red;
    background-color 
:rgba(255,0,0,0.5);
}
.mydemo p{
    color: black;
}
</style>
</head>
<body>    
    <div class="mydemo">
        <p>myIp</p>     
    </div>
</html>

這裡寫圖片描述

所用瀏覽器：谷歌火狐 IE edge 均合適
但是老版的IE會出現bug

css實現背景透明文字不透明

我們所說的設定透明度實際上是設定不透明度使用opacity會導致背景和圖片都透明，在此處不合適 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &

CSS3實現背景透明文字不透明

put fim webkit php 找到 lin har strong 如果　　最近遇到一個需求，如下圖，input框要有透明效果　　　　首先想到的方法是CSS3的 opacity屬性，但事實證明我想的太簡單了　　這個屬性雖然讓input框有透明效果，同時

css怎麼可以只讓背景透明文字不透明

單色背景可以不使用opacity屬性，而是使用rgba函式 ex： <div style="background-color:rgba(0,0,0,0.5)">背景是透明度0.5的黑色，文字不透明</div> 圖片做背景將圖片

半透明背景，文字不透明，ie8和現代瀏覽器的相容性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> &

CSS實現背景圖尺寸不隨瀏覽器縮放而變化的兩種方法

簡單 fix chrom per 實現瀏覽器 webkit 只需要 div 方法一. 把圖片作為background 有幾個CSS的屬性要提一下：background-size：cover，這個CSS3的屬性作用是把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域，背景

CSS實現背景透明，文字不透明，兼容所有瀏覽器

set rgba 技術打開 fit itl 默認 head copy 於是呢，熬夜加班做了11.11的活動，在PC端遇到了透明背景和透明圖片的問題，其實以前也遇到過，只是沒有總結起來，就忘記了，這次又撞墻了，必須記錄下來，一來給自己做個小總結，提個醒，最近變懶了，再不努力

CSS實現背景圖片透明而文字不透明效果的方法

1.毛玻璃效果：背景圖 + 偽類 + flite:blur(3px) .demo1{ width: 500px; height: 300px; line-height: 50px; text-align: center; } .demo1:befor

css實現背景透明，內容不透明

css實現背景和文字均為黑色，背景透明度為0.2，文字不透明： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-e

兼容IE6/7/8的css實現背景透明

class clas fff 元素 24點 spa borde lsp stat html代碼 <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR>

半透明視窗中顯示標準控制元件（控制元件與文字不透明）的實現方案（附原始碼）

原文 http://blog.csdn.net/harbinzju/article/details/7907127 和大家分享一下在半透明視窗中顯示標準控制元件的實現方案。通過層疊視窗可以簡單實現半透明與不規則形狀視窗的效果，但在其上顯示標準控制元件（控制元件與文字不

Delphi 如何實現視窗透明，但是視窗上的文字不透明

其實很簡單，進行下面的屬性設定將窗體的TransparentColor屬性設定為true窗體TransparentColorValue屬性設定為clBlack（黑色）窗體中的Label1的Color（

css 區域透明內容不透明

opacity sbo ack als box font line solid city <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-

使用SVG + CSS實現動態霓虹燈文字效果

rdp orm ans cnblogs fill href 大神 case ima 效果圖：原理：多個SVG描邊動畫使用不同的animation-delay即可！對於一個形狀SVG元素或文本SVG元素，可以使用stroke-dasharray來控制描邊的間隔樣式，並且

WPFのInkCanvas作為蒙版透明筆跡不透明

edi mcu white use http 發現 ttr tin color 原文:WPFのInkCanvas作為蒙版透明筆跡不透明本人最近利用inkcavas做一個蒙版的功能，結果發現筆跡稀釋了，經過一番查找發現：應該講inkcavas的背景設置為白色，然後透明，而不是

css實現多行文字超出省略號顯示，相容所有瀏覽器

原文連結：https://github.com/happylindz/blog/issues/12 float 特性實現多行文字截斷基本原理有個三個盒子 div，粉色盒子左浮動，淺藍色盒子和黃色盒子右浮動，當淺藍色盒子的高度低於粉色盒子，黃色盒子仍會處於淺藍色盒子右下方。如果淺藍

CSS實現多行文字截斷

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多行截斷</title> <style>

css實現背景backgroup漸變效果,相容各個瀏覽器(直接生成)

筆者其實對於css一直是一知半解的狀態。今天公司的需求需要讓背景如圖上所示。通過度娘找到了一個強大的背景漸變手動設計的網站，在此分享 gradient-editor(國外開發者) 順便獻上自己css程式碼。或許有些用處 background: rgb(

IOS7導航欄半透明變不透明

IOS7的扁平化設計的確受很多人喜愛（包括我自己），但是有時候呢，他的半透明著實讓人不想要啊比如說navigationController 在有tableview的情況下，就能在navigationBar後面看到我的table資料在網上找了很多句程式碼，完全沒有用啊，他

CSS實現背景圖片固定寬高比自適應調整

<img>標籤可以使圖片在保持寬高比不變的情況下自動調整。我們討論的是div的背景圖片實現固定寬高比自適應調整的方法。這裡的圖片不是< img>標籤一樣通過src引入，而是通過css的background-image: url('路徑')實現。 &

css實現多行文字在容器內垂直居中

提供兩種方法line-height和flex佈局方法<!DOCTYPE html> <html> <head> <meta charset="UTF-8

css實現背景透明文字不透明

我們所說的設定透明度實際上是設定不透明度

使用opacity會導致背景和圖片都透明，在此處不合適

使用css3中的rgba：

相關推薦