Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 天堂av电影,国产小视频免费看,男女交性视频免费 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          讓 color 自動適配背景色？分享 1 段優(yōu)質(zhì) CSS 代碼片段！
          
        
           
          
	
	
          
		
                        
          內(nèi)容首發(fā)于工粽號：程序員大澈，每日分享一段優(yōu)質(zhì)代碼片段，歡迎關(guān)注和投稿！
          大家好，我是大澈！
          本文約 1400+ 字，整篇閱讀約需 2 分鐘。
          今天分享一段優(yōu)質(zhì) CSS 代碼片段，讓文本和背景色混合產(chǎn)生一種獨(dú)特的效果，就像下圖這種。
          老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區(qū)留下你的見解！
          <div class="banner">
    <h1 class="title">每日分享一段優(yōu)質(zhì)代碼片段，歡迎關(guān)注與投稿！</h1>
</div>

.banner {
    height: 230px;
    background-image: url(./img/banner.png);
    background-repeat: no-repeat;
    background-size: 100% 230px;
    line-height: 230px;
    text-align: center;
}
.title {
    margin: 0;
    color: #fff;
    font-size: 50px;
    /* 關(guān)鍵點(diǎn) */
    mix-blend-mode: difference; 
}

          分享原因
          這段代碼展示了如何使用 CSS 和 HTML 創(chuàng)建一個帶有背景圖片和標(biāo)題文本的橫幅（banner），并且通過 mix-blend-mode: difference; 為標(biāo)題文本添加混合模式效果。
          mix-blend-mode 屬性可以為元素設(shè)置混合模式，使其顏色與背景顏色混合，從而創(chuàng)建有趣的視覺效果。
          這個效果在設(shè)計中很常見，能增加頁面的視覺吸引力，強(qiáng)調(diào)和突出文本內(nèi)容。
          代碼解析
          1. banner 類
          設(shè)置背景元素基礎(chǔ)樣式。
          定義背景圖片，以及讓文本垂直水平居中對齊。
          2. mix-blend-mode: difference;
          這是一個關(guān)鍵設(shè)置。
          使用了 mix-blend-mode: difference; ，這意味著標(biāo)題文字的顏色將與其父元素（.banner）的背景顏色進(jìn)行差值計算，產(chǎn)生類似于反相的效果。
          在這種情況下，由于父元素（.banner）的背景是白色，而文字原本的顏色是白色，通過差值計算后，文字顏色就變成了黑色，從而讓白色文字在白色背景上也能夠顯示。
          3. mix-blend-mode 屬性詳解
          mix-blend-mode CSS 屬性描述了元素的內(nèi)容應(yīng)該與其直系父元素的內(nèi)容和元素的背景如何混合。
          它允許創(chuàng)建各種視覺效果，例如半透明效果、陰影、圖片蒙版等。
          以下是兼容性：
          以下是一些常見的屬性值：
          normal：這是默認(rèn)值，使用正常的顏色混合模式，不產(chǎn)生特殊混合效果。
          multiply：將兩個顏色的值相乘，會得到一個更暗的顏色，常用于創(chuàng)建陰影效果。
          screen：將兩個顏色的值相加，然后減去相乘的值，會得到一個更亮的顏色，可用于創(chuàng)建高光效果。
          overlay：根據(jù)背景顏色的亮度來選擇顏色混合模式。如果背景顏色較暗，則使用 multiply 模式；如果背景顏色較亮，則使用 screen 模式。
          darken：將兩個顏色的值進(jìn)行比較，使用較暗的那個顏色。
          lighten：與 darken 相反，使用較亮的那個顏色。
          color-dodge：將前景色分解為 RGB 分量，并將每個分量分別除以（1 減去背景色的對應(yīng)分量），然后將每個分量限制在 0 到 1 之間，并使用限制后的前景色作為混合色。這種模式會使顏色變亮。
          color-burn：將前景色分解為 RGB 分量，并將每個分量分別除以背景色的對應(yīng)分量，然后將每個分量限制在 0 到 1 之間，并使用限制后的前景色作為混合色。它會使顏色變暗。
          difference：將前景色減去背景色的值，并取絕對值，會導(dǎo)致一種反相的效果。
          exclusion：將前景色和背景色的值相加，然后減去相乘的值的兩倍，常用于創(chuàng)建反相效果，但其對比度比 difference 更低，顏色更柔和。
          hue：將前景色的色相（hue）與背景色的飽和度（saturation）和亮度（lightness）混合，可在不改變亮度和飽和度的情況下改變顏色。
          saturation：將前景色的飽和度與背景色的色相和亮度混合，用于在不改變顏色的情況下改變飽和度。
          color：將前景色的色相、飽和度和亮度與背景色混合，會在改變所有顏色屬性的情況下改變前景色的顏色。
          luminosity：將前景色的亮度與背景色的色相和飽和度混合，可在不改變顏色的情況下改變亮度。
          晚，前端程序員阿鋒剛剛回到家，經(jīng)理便打來電話說道：我們的網(wǎng)站首頁要調(diào)整成黑白色，辛苦加個班實(shí)現(xiàn)一下吧！很多時候總會遇到一些突發(fā)事件需要網(wǎng)站首頁均呈灰色。那要如何讓網(wǎng)頁變灰呢？


          阿鋒首先想到：圖片方面的內(nèi)容只要換一個圖片就好，其他的就是靠控制 css 來進(jìn)行改變。但是一個網(wǎng)站有很多個css, 那么多的元素都有自己的顏色,整體變灰的工作量大，效率低。所以要有簡便快捷的方法。
          方案1
          • sass / less 等 css預(yù)編譯 語言來解決
          • 再用這些 css預(yù)編譯 語言來開發(fā)的時候, 一般會根據(jù)主色調(diào)來定義一些顏色變量
          • $globalColor: gray;
            $globalBtnColor: gray;
            // ...

          • 當(dāng)修改變量的時候, 就會導(dǎo)致整個網(wǎng)站的主色調(diào)改變顏色
            • 但是，因?yàn)?sass / less 都是開發(fā)階段使用的內(nèi)容
            • 一旦修改, 就需要從新編譯打包成新的 文件 進(jìn)行服務(wù)器部署，會相對比較麻煩
            • 而且一些細(xì)節(jié)的地方可能會遺漏掉 (比如沒有用全局變量的地方)
          方案二
          • 為了簡單一些, 快速一些操作，而且過段時間還要變回來，所以可以采取濾鏡的方式
          • 一個非常簡單的 css 代碼
          • filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=1);
            -webkit-filter: grayscale(100%);
          • 可以選擇直接改 css 文件, 把濾鏡添加到 html 標(biāo)簽
          • html {
                         filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=1);
            -webkit-filter: grayscale(100%);
            }
          • 也可以直接修改 html 文件, 把css 樣式以行內(nèi)式的方式添加到 html 標(biāo)簽上
          • <html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
            -webkit-filter: grayscale(100%);">
          這樣就簡單高效的實(shí)現(xiàn)了網(wǎng)頁的黑白灰色調(diào)。
          角邊框：
          在CSS3中，新增了圓角邊框樣式，這樣我們的盒子就可以變圓角了
          border-radius屬性用于設(shè)置元素的外邊框圓角。
          語法：
          border-radius: length;
          盒子陰影：
          CSS3中新增了盒子陰影，我們可以使用box-shadow屬性為盒子添加陰影。
          語法：
          box-shadow: h-shadow v-shadow blur spread color inset;
          值
          說明
          h-shadow
          必需的。水平陰影的位置。允許負(fù)值
          v-shadow
          必需的。垂直陰影的位置。允許負(fù)值
          blur
          可選。模糊距離
          spread
          可選。陰影的大小
          color
          可選。陰影的顏色。在CSS顏色值
          尋找顏色值的完整列表
          inset
          可選。從外層的陰影（開始時）改變陰影內(nèi)側(cè)陰影
          文字陰影：
          在CSS3中，我們可以使用text-shadow屬性將陰影應(yīng)用于文字
          text-shadow： h-shawow v-shadow blur color;
          值
          描述
          h-shadow
          必需。水平陰影的位置。允許負(fù)值。
          v-shadow
          必需。垂直陰影的位置。允許負(fù)值。
          blur
          可選。模糊的距離。
          color
          可選。陰影的顏色。參閱 CSS 顏色值。
          詳情可參考
          https://www.runoob.com/ 菜鳥教程
          https://www.w3school.com.cn/ w3c
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
丝袜美腿高跟呻吟高潮一区|
无码人妻精品一区二区蜜桃百度
|
亚洲中文字幕丝袜制服一区
|
春暖花开亚洲性无区一区二区|
秋霞鲁丝片一区二区三区|
亚洲国产日韩在线一区|
福利片免费一区二区三区|
国产乱码一区二区三区四|
激情一区二区三区|
日韩经典精品无码一区|
日韩精品一区二区三区毛片|
国产日韩精品视频一区二区三区
|
精品无码国产AV一区二区三区|
亚洲av无码一区二区三区网站|
国产A∨国片精品一区二区
|
亚洲av日韩综合一区二区三区|
日本一区二区不卡视频
|
麻豆精品人妻一区二区三区蜜桃|
中文字幕一区视频|
人妻无码视频一区二区三区|
国产精品无圣光一区二区|
亚洲色婷婷一区二区三区|
好湿好大硬得深一点动态图91精品福利一区二区
|
一区二区免费视频|
少妇精品无码一区二区三区|
亚洲一区影音先锋色资源|
无码国产精品一区二区免费式芒果
|
日本一区视频在线播放|
国产一区二区三区在线免费观看|
国产福利酱国产一区二区|
eeuss鲁片一区二区三区|
日韩在线一区高清在线|
日本一区二区三区四区视频
|
日韩亚洲AV无码一区二区不卡|
亚洲成AV人片一区二区密柚|
精品人伦一区二区三区潘金莲|
国产福利91精品一区二区三区|
波多野结衣一区二区三区
|
中文字幕精品无码一区二区三区
|
国产综合视频在线观看一区|
国产女人乱人伦精品一区二区|