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

?技術點有二：

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

2、文字垂直居中顯示

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

? ? ? ? ? 文字是不定寬高的，用absolute+transform來實現

難點：發現將中間內容的元素透明度設為0.5，文字也會繼承此特性，變為0.5

因此采用：::before偽類來實現

最終利用三層結構來實現

代碼結構如下：

main：最外層，設置position:relative;

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

inner：最內層，用來垂直居中不定寬高的文字

實現代碼：

.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、水平垂直居中

元素結構如下：

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

（1）定寬高元素適用

• absolute + 負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的實現/

3、 實現一個圖片，鼠標移動上去的時候換為圖片文字介紹

技術點：了解3個CSS3屬性

（1）backface-visibility 屬性定義當元素不面向屏幕時是否可見。

（2）transition 屬性設置元素當過渡效果，四個簡寫屬性為：

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

（3）Transform屬性應用于元素的2D或3D轉換。這個屬性允許你將元素旋轉，縮放，移動，傾斜等。

rotateY：定義沿著 Y 軸的 3D 旋轉。

.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 的簡單用法：讓圖片動起來

.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來定義動畫需要產生的效果；

分這樣是這樣

1、text-align:center

作用于行內元素，使行內元素水平居中，對inline-block也有作用。text-align 屬性規定元素中的文本的水平對齊方式。

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

2、grid布局

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

容器指定了網格布局以后，接著就要劃分行和列。grid-template-columns屬性定義每一列的列寬，grid-template-rows屬性定義每一行的行高。

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

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

<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屬性設置單元格內容的水平位置（左中右），跟justify-items屬性的用法完全一致，但只作用于單個項目。

align-self屬性設置單元格內容的垂直位置（上中下），跟align-items屬性的用法完全一致，也是只作用于單個項目。

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、響應式設計

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.

要實現不同屏幕寬度，每一行的項目數不同。有時是三欄布局，有時是四欄布局，則可以寫如下代碼

.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、不同視窗的字體大小設計

可以給元素設置in單位 ?英寸（Inches）。絕對長度單位。

• 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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。