《小白HTML5成長(zhǎng)之路31》半透明背景的彈窗是怎么用CSS布局的

方的冬天最怕有風(fēng)，空氣雖然好了，但是異常的冷，吸幾口冷風(fēng)感覺(jué)肺都結(jié)了冰。一大早小白來(lái)到辦公室琢磨用戶交互方面的問(wèn)題，看了幾個(gè)網(wǎng)站發(fā)現(xiàn)很多網(wǎng)站的彈窗都是自定義的，而且還把彈窗周?chē)膮^(qū)域做成了半透明狀，看上去非常不錯(cuò)。于是小白也準(zhǔn)備自己通過(guò)css布局一個(gè)彈窗試試，一來(lái)以后肯定會(huì)用上這個(gè)功能，二來(lái)熟悉一下最近掌握的CSS+HTML布局。

說(shuō)干就干，小白打開(kāi)webStrom做起了彈窗的布局。他首先用一個(gè)容器layer作為彈窗的容器，然后里面放了窗口容器（dialog），窗口容器里面還包含了三個(gè)子容器，分別是標(biāo)題（layerTitle）、內(nèi)容區(qū)域（layerContent）、按鈕區(qū)域（layerBTContainer）。

小白想：“l(fā)ayer要充滿并遮擋整個(gè)瀏覽器窗口，而且滾動(dòng)頁(yè)面它還得一直保持遮擋的狀態(tài)，把它設(shè)置為浮動(dòng)類(lèi)型（position:fixed）的容器最合適。里面的dialog需要保持在瀏覽器的最中心位置，因此最好把dialog設(shè)置成固定寬度和高度，這樣可以很好的實(shí)現(xiàn)居中?！?，于是小白先把layer和dialog以及dialog內(nèi)部的容器設(shè)定了一個(gè)初步的CSS樣式。

layer的position設(shè)置為fixed，上下左右距離都設(shè)置成0，就可以達(dá)到占用整個(gè)窗口。里面的dialog容器小白根據(jù)剛學(xué)習(xí)的CSS溢出法讓dialog上下都居中。dialog如果是絕對(duì)定位，設(shè)置上下左右距離都為0它會(huì)占用整個(gè)父容器區(qū)域，但是如果CSS中限制了dialog的寬和高并且設(shè)置了marin為auto，它就會(huì)基于父容器居中。

為了測(cè)試transition屬性，小白還把確定按鈕上面設(shè)置了一個(gè)鼠標(biāo)移上去以后漸變的效果，做完以后就是這個(gè)樣子：

看到布局好的彈窗小白心里非常高興，突然他想到一個(gè)問(wèn)題，這個(gè)彈窗背景還沒(méi)設(shè)置半透明，于是趕緊往layer上增加了opacity:0.5這個(gè)半透明屬性，小白滿懷信息的刷新了頁(yè)面，當(dāng)看到結(jié)果時(shí)小白發(fā)現(xiàn)背景和窗口都變成了半透明。

正好這時(shí)老朱從小白身邊經(jīng)過(guò)，隨口跟小白說(shuō)了一句：“小白，你是不是把窗口的父容器設(shè)置成半透明了？”

“是啊！父容器背景是黑色，所以我把父容器設(shè)置成了半透明！”

“可是父容器設(shè)置半透明會(huì)對(duì)他的子元素產(chǎn)生影響啊，這樣會(huì)導(dǎo)致它里面的所有元素都變成半透明，你為啥不給窗口添加一個(gè)兄弟容器來(lái)實(shí)現(xiàn)這個(gè)效果呢？”

小白仔細(xì)想了想，說(shuō)道：“哦！我明白了，我可以在layer容器里面放一個(gè)跟layer一樣大的容器，這樣就不會(huì)沖突了，我再試試！”

不一會(huì)小白找到老朱，說(shuō)道：“我改好了，現(xiàn)在我給dialog添加了一個(gè)layerbg容器作為背景層，然后把layer之前的背景色和透明度去掉，放到了新增加的背景層上面，背景層高和寬與layer一樣所以這樣就不會(huì)把dialog也變成半透明了。你看看效果?！?/p>

老朱說(shuō)：“嗯！不錯(cuò)，你現(xiàn)在通過(guò)HTML和CSS布局的這個(gè)彈窗還能做很多完善，比如出現(xiàn)彈窗時(shí)增加一個(gè)動(dòng)畫(huà)效果、給它添加一個(gè)關(guān)閉按鈕或者取消按鈕等等。除了提示功能以外，你現(xiàn)在做的這個(gè)還能再進(jìn)行深入修改，把它變成可以輸入文字的prompt框，點(diǎn)擊確定以后可以對(duì)頁(yè)面或者數(shù)據(jù)庫(kù)數(shù)據(jù)進(jìn)行修改?！?/p>

想學(xué)H5的朋友可以關(guān)注老爐，您的關(guān)注是我持續(xù)更新《小白HTML5成長(zhǎng)之路》的動(dòng)力！

家好，我是大澈！

本文約 800+ 字，整篇閱讀約需 1 分鐘。

每日分享一段優(yōu)質(zhì)代碼片段。

今天分享一段優(yōu)質(zhì) CSS 代碼片段，實(shí)現(xiàn) CSS 文字鏤空的效果。

老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評(píng)論區(qū)留下你的見(jiàn)解！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css文字鏤空</title>
    <style>
      div {
        margin: 10% auto;
        font-size: 60px;
        font-weight: bold;
        text-align: center;
        /*字體粗細(xì)*/
        -webkit-text-stroke: 1px red;
        /*描邊*/
        -webkit-text-fill-color: transparent;
      }
    </style>
  </head>
  <body>
    <div>文字鏤空</div>
  </body>
</html>

分享原因

這段代碼展示了如何使用 CSS 為文本添加描邊效果和透明填充顏色，從而實(shí)現(xiàn)有趣的文字鏤空視覺(jué)效果。

它展示了現(xiàn)代 CSS 特性的使用，讓我們使用幾行代碼，就可以輕松實(shí)現(xiàn)較復(fù)雜的樣式效果。

在項(xiàng)目中確實(shí)可能會(huì)用到，到時(shí)候直接來(lái)CV即可。

我越來(lái)越覺(jué)得，CSS真的是 yyds ！

代碼解析

1. margin: 10% auto;

將元素的上下邊距設(shè)置為父元素高度的10%，左右邊距自動(dòng)，這樣可以將元素在水平方向居中，在垂直方向看著也比較舒服。

2. -webkit-text-stroke: 1px red;

為文本添加1像素寬的紅色描邊。

-webkit-text-stroke 是一個(gè)非標(biāo)準(zhǔn)的 CSS 屬性，用于在 WebKit 內(nèi)核瀏覽器中為文本添加描邊效果。

它由兩個(gè)部分組成：描邊的寬度和描邊的顏色。這個(gè)屬性可以創(chuàng)建一些特別的視覺(jué)效果，如在黑色背景上用白色描邊的文字等。

這是一個(gè) WebKit 特性，所以帶有 -webkit- 前綴。此屬性在支持 WebKit 內(nèi)核的瀏覽器中有效，例如 Chrome 和 Safari。

3. -webkit-text-fill-color: transparent;

將文本的填充顏色設(shè)置為透明。

-webkit-text-fill-color 也是一個(gè)非標(biāo)準(zhǔn)的 CSS 屬性，用于在 WebKit 內(nèi)核瀏覽器中設(shè)置文本的填充顏色。

這個(gè)屬性與標(biāo)準(zhǔn)的 color 屬性類(lèi)似，但它的設(shè)計(jì)目的是與 -webkit-text-stroke 一起使用，以提供更高級(jí)的文本樣式。

這同樣是一個(gè) WebKit 特性。

- end -

素的顯示與隱藏

使用CSS讓元素不可見(jiàn)的方法很多，剪裁、定位到屏幕外、透明度變化等都是可以的。雖然它們都是肉眼看不見(jiàn)，但背后卻在多個(gè)維度上都有差別

下面是總結(jié)的一些比較好的隱藏實(shí)踐，大家一起來(lái)根據(jù)實(shí)際開(kāi)發(fā)場(chǎng)景來(lái)選擇合適的使用

比較好的隱藏實(shí)踐

不占空間，資源可以加載，DOM可訪問(wèn) 使用display:none

不占空間，隱藏顯示時(shí)有transition效果

占空間，不能點(diǎn)擊 visibility: hidden

不占空間，不能點(diǎn)擊，鍵盤(pán)能訪問(wèn) clip裁切

占空間，不能點(diǎn)擊，鍵盤(pán)能訪問(wèn) relative

占空間，可以點(diǎn)擊 opacity

隱藏文字使用text-indent

根據(jù)實(shí)際的隱藏場(chǎng)景選擇合適的隱藏方法，這里就不再多說(shuō)了，接著往下看吧

display與元素的顯隱

我們都知道display如果值為none，則該元素以及所有后代元素都隱藏，反之如果值是非none的情況，則都為顯示了

display可以說(shuō)是web顯隱交互中出場(chǎng)頻率最高的一種隱藏方式，是真正意義上的隱藏，干凈利落，不留痕跡

none做到了無(wú)法點(diǎn)擊、無(wú)法使用屏幕閱讀器等輔助設(shè)備訪問(wèn)，不占空間，其實(shí)不僅僅是這樣，更應(yīng)該知道的是

me: 我有酒，那么別說(shuō)你沒(méi)有故事

我知道display:none你才不是一個(gè)沒(méi)有故事的女同學(xué)

display: none的元素的background-image圖片根據(jù)不同瀏覽器的情況加載情況不一

在Firefox瀏覽器下，display:none的background-image圖片不加載，包括父元素display:none也是如此在Chrome和Safari瀏覽器，則根據(jù)父元素是否是否為none來(lái)影響圖片加載情況，父元素帶有display:none，圖片不加載。

父元素不帶有display:none,而自身有背景圖元素帶的話，那也照樣加載

3.在IE瀏覽器下，無(wú)論怎么搞都會(huì)請(qǐng)求圖片資源，就是這么任性

因此，在實(shí)際開(kāi)發(fā)的時(shí)候，例如頭圖輪播切換效果

那些默認(rèn)需要隱藏的圖片作為背景圖藏在display:none元素的子元素上，這樣的細(xì)小改動(dòng)就可以明顯提升頁(yè)面的加載體驗(yàn)，也是非常實(shí)用的小技巧

whatever

上面說(shuō)的興致盎然，但實(shí)際中不可能全部都是背景圖去加載圖片資源的

還有另外一個(gè)好朋友，img元素，然并卵的是，上面說(shuō)了一大堆加載不加載的情況，對(duì)img來(lái)說(shuō)沒(méi)個(gè)鳥(niǎo)用，人家不管你none不none的，依舊帶著勇闖天涯的氣概去請(qǐng)求著資源

活久見(jiàn)

都說(shuō)display:none做事最純粹，最干凈，不能被點(diǎn)擊，觸碰到，然而下面這種情況又是什么鬼？

出來(lái)解釋解釋?zhuān)覀兌际俏拿魅耸墙^對(duì)不會(huì)動(dòng)武的！

隱藏的按鈕會(huì)觸發(fā)click,觸發(fā)表單提交，此現(xiàn)象出現(xiàn)在時(shí)髦的瀏覽器中(IE9+，現(xiàn)代標(biāo)準(zhǔn)瀏覽器中）

既然有這種例外情況那加了display:none的意義又是什么呢？

很多都是純天然的

HTML中有很多標(biāo)簽和屬性天然自帶display:none

HTML5中新增了hidden這個(gè)布爾屬性，可以讓元素天生隱藏起來(lái)

既然說(shuō)到了visibility了，那么就趕緊邀請(qǐng)visibility閃亮登場(chǎng)吧

visibility與元素的顯隱

visibility要為自己正名，不僅僅是保留空間這么簡(jiǎn)單

看點(diǎn)多多：

繼承性(最有意思的一個(gè)特點(diǎn)，不是我說(shuō)的)

2. 與css計(jì)數(shù)器

visibility:hidden雖然讓元素不可見(jiàn)了，但是不影響其計(jì)數(shù)效果，不會(huì)重新計(jì)算結(jié)果

3. 與transition

設(shè)置了visibility:hidden的元素，可以很好的展現(xiàn)transition過(guò)渡效果

這是因?yàn)閠ransition支持的css屬性中有visibility(果然是兄弟)，而并沒(méi)有display屬性

4.與JS

visibility:hidden除了對(duì)transition友好外，對(duì)js來(lái)說(shuō)也很友好

在實(shí)際開(kāi)發(fā)中，需要對(duì)隱藏元素進(jìn)行尺寸和位置的獲取，來(lái)實(shí)現(xiàn)布局精確定位的交互

此時(shí)，就建議使用visibility:hidden

好了以上內(nèi)容要告一段落了，我們繼續(xù)開(kāi)始新的征程吧，哈哈

用戶界面樣式

用戶界面樣式指的是CSS世界中用來(lái)幫助用戶進(jìn)行界面交互的一些CSS樣式，主要有outline和cursor等屬性

和border形似的outline屬性

outline表示元素的輪廓，語(yǔ)法也和border一樣，分為寬度、類(lèi)型和顏色三個(gè)值

樣式表示上相同，但是設(shè)計(jì)的初衷卻是不太相同的，這一點(diǎn)天地日月可鑒

outline是一個(gè)和用戶體驗(yàn)密切相關(guān)的屬性，與focus狀態(tài)以及鍵盤(pán)訪問(wèn)密切相關(guān)

對(duì)于按鈕或鏈接，通常的鍵盤(pán)操作是：Tab鍵按次序不斷focus控件元素(鏈接、按鈕、輸入框等表單元素)，或者focus設(shè)置了tabindex的普通元素，然后按Shift+Tab是反向訪問(wèn)

重點(diǎn)來(lái)了！

默認(rèn)狀態(tài)下，對(duì)于處于focus狀態(tài)的元素，瀏覽器會(huì)通過(guò)發(fā)光or虛框的形式進(jìn)行區(qū)分和提示，這是友好的用戶體驗(yàn)，很有必要，不然用戶很難知道自己當(dāng)前聚焦在了哪個(gè)元素上面，會(huì)迷失自我

元素如果聚焦到了a鏈接上，按下回車(chē)鍵就會(huì)跳轉(zhuǎn)到相應(yīng)鏈接，以上的交互都是基于鍵盤(pán)訪問(wèn)的，這就是為什么outline和鍵盤(pán)訪問(wèn)如此親密了

不專(zhuān)業(yè)的行為

很多時(shí)候直接在reset樣式的時(shí)候，寫(xiě)成如下形式是非常不可取的

這樣直接一竿子打死一群鴨子的做法是不對(duì)的，更多的時(shí)候是因?yàn)闉g覽器內(nèi)置的focus效果和設(shè)計(jì)風(fēng)格格格不入，才需要重置，而且要使用專(zhuān)門(mén)的類(lèi)名

最后再?gòu)?qiáng)調(diào)一遍：萬(wàn)萬(wàn)不可在全局設(shè)置outline: 0 none;

這樣的操作會(huì)造成鍵盤(pán)訪問(wèn)的時(shí)候用戶找不到當(dāng)前焦點(diǎn)，容易產(chǎn)生困擾的，為了大家好，收斂一下吧

下面來(lái)點(diǎn)干貨: 在實(shí)際開(kāi)發(fā)中，有時(shí)候需要讓普通元素代替表單控件元素有outline效果

舉個(gè)栗子：submit按鈕來(lái)完成UI設(shè)計(jì)是非常麻煩的，所以使用label元素來(lái)移花接木，通過(guò)for屬性和這些原生的表單控件相關(guān)聯(lián)

真正的不占據(jù)空間的outline及其應(yīng)用

outline是一個(gè)真正意義上不占任何空間的屬性，Amazing

頭像剪裁的矩形鏤空效果

先來(lái)看個(gè)效果圖

上圖就是矩形鏤空效果，那么下面直接上代碼，滿滿的干貨

用一個(gè)大大的outline來(lái)實(shí)現(xiàn)周?chē)胪该鞯暮谏谡?，因?yàn)閛utline無(wú)論設(shè)置多么多么大，都不會(huì)占據(jù)空間影響布局，至于超出的部分，直接給父元素設(shè)置一個(gè)overflow:hidden就搞定了注意：

自動(dòng)填滿屏幕剩余空間的應(yīng)用技巧

開(kāi)發(fā)中很多時(shí)候，由于頁(yè)面內(nèi)容不夠多，導(dǎo)致底部footer會(huì)出現(xiàn)尷尬的剩余空間，解決方法往往也有很多種，在此我們還是依然利用outline的功能來(lái)完美實(shí)現(xiàn)一下

關(guān)鍵的css就是設(shè)置一個(gè)超大輪廓范圍的outline屬性，如給個(gè)9999px，保證無(wú)論屏幕多高，輪廓顏色都能覆蓋

值得注意的是，outline無(wú)法指定方位，它是直接向四周發(fā)散的，所以需要配合clip剪裁來(lái)進(jìn)行處理,以左邊和上邊為邊界進(jìn)行裁剪

光標(biāo)屬性

光標(biāo)屬性cursor我們真的是最熟悉的陌生人啊

為什么這么說(shuō)呢，因?yàn)樵诒姸嗟膶傩灾得媲埃覀兯坪踔挥玫搅藀ointer(手形)(最常用的，沒(méi)有之一)，move(移動(dòng))，default(系統(tǒng)默認(rèn))這幾樣

在cursor的世界里，遠(yuǎn)比我們想象的要豐富很多，下面按照功能特性來(lái)對(duì)其進(jìn)行分類(lèi)吧

琳瑯滿目的cursor屬性值

友情不友情的小提示：☆（表示常用）

鏈接和狀態(tài)

cursor: progress; 進(jìn)行中

選擇

拖拽都是CSS3新增的光標(biāo)類(lèi)型

以上內(nèi)容就介紹完了用戶界面樣式的全部?jī)?nèi)容了，還有最后一章的冷知識(shí)，大家不要方，繼續(xù)看下去，了解一下，了解一下，了解一下

流向的改變

說(shuō)出來(lái)你可能不信，direction可以改變水平流向，盡管知道或者使用過(guò)的人少之又少，但并不妨礙它的發(fā)光發(fā)熱

而且屬性簡(jiǎn)單好記，值少，兼容極好ie6支持，可以來(lái)挖掘一下它的神奇功效

direction

僅僅兩個(gè)值：

direction: rtl;

當(dāng)然看到這里你可能會(huì)感覺(jué)，這些說(shuō)起來(lái)都沒(méi)什么鳥(niǎo)用，因?yàn)榇笳惺遣惠p易放出的，而真正有用的地方在于改變網(wǎng)頁(yè)布局的時(shí)候

direction屬性默認(rèn)有一個(gè)特性

可以改變替換元素(img,input,textarea,select)或inline-block/inline-table元素的水平呈現(xiàn)順序

舉個(gè)例子：顛倒順序

再舉個(gè)例子：

比如制作彈窗組件的時(shí)候，確認(rèn)和取消按鈕有的時(shí)候會(huì)根據(jù)用戶的使用行為會(huì)顯示在不同的位置

下面來(lái)看看這種特性的表現(xiàn)在實(shí)際開(kāi)發(fā)中的作用

windows用戶看到的樣子

好了，direction的話題就告一段落，接下來(lái)介紹最后一個(gè)知識(shí)了，堅(jiān)持住，快休息了

writing-mode

改變CSS世界縱橫規(guī)則的writing-mode，如此強(qiáng)大的功能，居然沒(méi)有被大家發(fā)掘和廣發(fā)應(yīng)用起來(lái)，實(shí)屬遺憾了，話不多說(shuō)，往下看

writing-mode作用及真正需要關(guān)注的屬性值

writing-mode可以改變排版，變成垂直流，如下圖所示

在使用語(yǔ)法上，也是需要記兩套的，一套是IE私有屬性，一套是CSS3規(guī)范屬性

CSS3語(yǔ)法：

IE語(yǔ)法：

針對(duì)實(shí)戰(zhàn)版來(lái)整理一份writing-mode是這樣的

對(duì)于垂直排版來(lái)說(shuō)，實(shí)際開(kāi)發(fā)是很少會(huì)遇到的，不過(guò)還是要說(shuō)說(shuō)writing-mode帶來(lái)的改變

水平方向也能margin合并

我們都知道兩個(gè)相鄰的元素垂直的margin會(huì)合并，當(dāng)元素變?yōu)榇怪绷鞯臅r(shí)候，水平的margin也會(huì)合并

普通塊元素可以使用margin: auto實(shí)現(xiàn)垂直居中

text-align:center實(shí)現(xiàn)圖片垂直居中(同上實(shí)現(xiàn)的效果）

實(shí)現(xiàn)全兼容的icon fonts圖標(biāo)旋轉(zhuǎn)效果

老IE下讓小圖標(biāo)旋轉(zhuǎn)很麻煩，writing-mode把文檔變成垂直流的時(shí)候，英文、數(shù)字和字符號(hào)都天然的轉(zhuǎn)了90°

@font-face的兼容性很好IE5.5就支持了，所以就算是IE6和IE7也沒(méi)問(wèn)題

好了，這就是《CSS世界》里最后三章的全部?jī)?nèi)容了，終于寫(xiě)完了，哈哈，希望大家有收獲一些冷知識(shí)。

簡(jiǎn)單說(shuō)兩句

做個(gè)個(gè)人的小總結(jié)吧：

css有很多奇妙的地方，在某些特性當(dāng)初被設(shè)計(jì)出來(lái)的時(shí)候可能只是為了某些圖文排版而生

但是我們可以利用它們帶來(lái)的特性發(fā)揮自己的創(chuàng)造力，實(shí)現(xiàn)其他很多意想不到的效果，因此，上面所講述的所有知識(shí)點(diǎn)，盡管很多內(nèi)容都有點(diǎn)奇技淫巧以悅婦孺的過(guò)程

但這也給我們開(kāi)發(fā)的過(guò)程中，提供了一些很出奇的妙招，值得我們好好學(xué)習(xí)領(lǐng)悟

感謝個(gè)位的觀看了，再見(jiàn)了，哈哈

在線咨詢

上一篇：HTML(5) 代碼規(guī)范
下一篇：HTML5 特效之多圖標(biāo)動(dòng)畫(huà)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

《小白HTML5成長(zhǎng)之路31》半透明背景的彈窗是怎么用CSS布局的

您的項(xiàng)目需求