1、實(shí)現(xiàn)背景圖片透明，圖片之上的文字正常顯示

?技術(shù)點(diǎn)有二：

1、背景圖片透明，其上的文字正常顯示

2、文字垂直居中顯示

分析：文字顯示在背景之上，那么給文字的z-index：99；

? ? ? ? ? 文字是不定寬高的，用absolute+transform來實(shí)現(xiàn)

難點(diǎn)：發(fā)現(xiàn)將中間內(nèi)容的元素透明度設(shè)為0.5，文字也會(huì)繼承此特性，變?yōu)?.5

因此采用：::before偽類來實(shí)現(xiàn)

最終利用三層結(jié)構(gòu)來實(shí)現(xiàn)

代碼結(jié)構(gòu)如下：

main：最外層，設(shè)置position:relative;

content:中間層，設(shè)置position:absolute,和偽類::before.在before中設(shè)置背景圖片，并給圖片添加opacity屬性。

inner：最內(nèi)層，用來垂直居中不定寬高的文字

實(shí)現(xiàn)代碼：

.content-wrapper {width: 100%;position: relative;height: 400px;}.content::before{content: "";background-image: url(imgs/elephant.jpg);opacity: 0.3;background-position: center;background-repeat: no-repeat;width: 100%;height: 400px;position: absolute;top: 0px;left: 0px;}.inner {z-index:100;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

2、水平垂直居中

元素結(jié)構(gòu)如下：

<div class="wp"><div class="box">123123</div> </div>

（1）定寬高元素適用

• absolute + 負(fù)margin

（2）不定寬高的元素

• absolute + transform
• css-table
• .wp {display: table-cell;text-align: center;vertical-align: middle; } .box {display: inline-block; }
• ?flex
• .wp {display: flex;justify-content: center;align-items: center; }
• grid
• .wp {display: grid; } .box {align-self: center;justify-self: center; }

如上述代碼.inner的實(shí)現(xiàn)/

3、 實(shí)現(xiàn)一個(gè)圖片，鼠標(biāo)移動(dòng)上去的時(shí)候換為圖片文字介紹

技術(shù)點(diǎn)：了解3個(gè)CSS3屬性

（1）backface-visibility 屬性定義當(dāng)元素不面向屏幕時(shí)是否可見。

（2）transition 屬性設(shè)置元素當(dāng)過渡效果，四個(gè)簡(jiǎn)寫屬性為：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

（3）Transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換。這個(gè)屬性允許你將元素旋轉(zhuǎn)，縮放，移動(dòng)，傾斜等。

rotateY：定義沿著 Y 軸的 3D 旋轉(zhuǎn)。

.front,.back {width: 30%;height: 200px;position: absolute;-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-transition: -webkit-transform 300ms;transition: -webkit-transform 300ms;-webkit-transition-timing-function: linear;transition-timing-function: linear;border-radius: 5px;margin: 3% 2% 10% 2%;}.front p {text-align: center;font-size: 15px;color: #00F;}.front img {width: 100%;height: 200px;}.back {background: -webkit-linear-gradient(top left, #009970, #84DD63);background: linear-gradient(to bottom right, #009970, #84DD63);-webkit-transform: rotateY(180deg);transform: rotateY(180deg);}.item:hover .front {-webkit-transform: rotateY(-180deg);transform: rotateY(-180deg);} .item:hover .back {-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}

4、animation 的簡(jiǎn)單用法：讓圖片動(dòng)起來

.clouds img {max-width: 250px; }.clouds img:nth-child(1) {position: absolute;left: 0;bottom: 0;animation:mymove 5s infinite; } @keyframes mymove {from {left: 0;}to {left:100%;} } @-moz-keyframes mymove /* Firefox */ { from {left:0px;} to {left:200px;} }@-webkit-keyframes mymove /* Safari 和 Chrome */ {from {left:0px;}to {left:200px;} }@-o-keyframes mymove /* Opera */ { from {top:0px;} to {top:200px;} }

用@keyframes來定義動(dòng)畫需要產(chǎn)生的效果；

分這樣是這樣

1、text-align:center

作用于行內(nèi)元素，使行內(nèi)元素水平居中，對(duì)inline-block也有作用。text-align 屬性規(guī)定元素中的文本的水平對(duì)齊方式。

特別的，img是行內(nèi)可替換元素，所以也可以使圖片水平居中

2、grid布局

Flex 布局是軸線布局，只能指定"項(xiàng)目"針對(duì)軸線的位置，可以看作是一維布局。Grid 布局則是將容器劃分成"行"和"列"，產(chǎn)生單元格，然后指定"項(xiàng)目所在"的單元格，可以看作是二維布局。Grid 布局遠(yuǎn)比 Flex 布局強(qiáng)大。但目前僅有高版本瀏覽器支持

容器指定了網(wǎng)格布局以后，接著就要?jiǎng)澐中泻土小rid-template-columns屬性定義每一列的列寬，grid-template-rows屬性定義每一行的行高。

grid-template-columns屬性和grid-template-rows屬性里面，還可以使用方括號(hào)，指定每一根網(wǎng)格線的名字，方便以后的引用。

grid-row-gap屬性設(shè)置行與行的間隔（行間距），grid-column-gap屬性設(shè)置列與列的間隔（列間距）。

<header><h1>Klayf dffgi</h1><p>kffffggg@hawk.iit.edu</p><p>sfas3345252@123</p><p><strong>BA Computer Science</strong></p><p><strong>Expected Graduation: Dec 2020</strong></p></header>

justify-self屬性設(shè)置單元格內(nèi)容的水平位置（左中右），跟justify-items屬性的用法完全一致，但只作用于單個(gè)項(xiàng)目。

align-self屬性設(shè)置單元格內(nèi)容的垂直位置（上中下），跟align-items屬性的用法完全一致，也是只作用于單個(gè)項(xiàng)目。

header {display: grid;margin-bottom: 20px;grid-template-columns: [start] 50% [middle] 50% [end];grid-template-rows: auto;grid-column-gap: 25px;grid-row-gap: 2px;line-height: 1.25; }header p:nth-child(2n) {justify-self: right; }header p:nth-child(2n + 1) {justify-self: left; }

?最終展示效果為：

3、響應(yīng)式設(shè)計(jì)

Why code mobile-first

Code for larger screens is usually more complicated than the codes for smaller screens. This is why coding mobile first helps simplify your code.

要實(shí)現(xiàn)不同屏幕寬度，每一行的項(xiàng)目數(shù)不同。有時(shí)是三欄布局，有時(shí)是四欄布局，則可以寫如下代碼

.gallery_item{ Float:left;Margin-right:5%;@media (max-width:800px){&:nth-child(3n){Width:30%;Margin-right:0; } }@media (min-width:800px){&:nth-child(4n){Width:30%;Margin-right:0; } } }

4、不同視窗的字體大小設(shè)計(jì)

可以給元素設(shè)置in單位 ?英寸（Inches）。絕對(duì)長(zhǎng)度單位。

• 1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

1vw = 1% of viewport width （瀏覽器視口寬度）
1vh = 1% of viewport height ?（瀏覽器視口高度）
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

總結(jié)

以上是生活随笔為你收集整理的CSS知识课堂的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。