css基礎(chǔ)必備-元素背景，前端小白一看就會(huì)

素背景background

使用CSS設(shè)置各種HTML元素的背景，元素的背景有以下屬性：

background-color - 屬性用于設(shè)置元素的背景色，值可以是十六進(jìn)制顏色代碼，RGB值或顏色名稱。
background-image - 屬性用于設(shè)置元素的背景圖像，使用url()屬性指定圖像的路徑。
background-repeat - 屬性用于控制背景圖像是否重復(fù)，值有repeat,repeat-x,repeat-y,no-repeat。
background-position - 屬性用于控制背景圖像的位置，值有right,left,top,bottom,center或者數(shù)值和百分比。
background-attachment - 屬性用于控制背景圖像是否可以滾動(dòng)，值有scroll,fixed。
background - 屬性用作其他背景屬性的簡(jiǎn)寫。

設(shè)置背景顏色：

設(shè)置背景圖像：

設(shè)置背景圖像沿x軸重復(fù)：

設(shè)置圖像不重復(fù)，位于右上角：

設(shè)置圖像不重復(fù)，不隨內(nèi)容滾動(dòng)：

如果需要指定的圖像屬性太多時(shí)，可采用簡(jiǎn)寫形式，如：

使用背景簡(jiǎn)寫時(shí)，屬性的指定順序如下所示：

面

在現(xiàn)代網(wǎng)頁設(shè)計(jì)中，個(gè)人主頁是一個(gè)展示個(gè)人信息、技能、事件等的重要載體。為了吸引訪客的注意力并提供良好的用戶體驗(yàn)，設(shè)計(jì)師通常會(huì)運(yùn)用各種技巧和效果來增加頁面的吸引力。本文將介紹如何使用CSS創(chuàng)建一個(gè)驚嘆的個(gè)人主頁介紹卡片，展示獨(dú)特魅力；

PREVIEW

創(chuàng)建HTML結(jié)構(gòu)

首先，需要定義基本的HTML結(jié)構(gòu)來容納個(gè)人主頁介紹卡片；

這里外層使用一個(gè)div包裹，里面使用三個(gè)<div>元素作為包裹容器布局，并在其中添加所需的圖像、內(nèi)容和按鈕等：

<div class="card">
  <div class="box">
    <div class="img_box">
      <video 
        src="./assets/video.mp4"
        muted
        autoplay
        loop
      />
    </div>
  </div>

  <div class="box">
    <div class="content">
      <h2>
        Alexa
        <br>
        <span>
          Professional Artist
        </span>
      </h2>

      <ul>
        <li>
          Posts
          <span>22</span>
        </li>
        <li>
          Followers
          <span>999+</span>
        </li>
        <li>
          Following
          <span>7</span>
        </li>
      </ul>

      <button>Follow</button>
    </div>
  </div>

  <div class="circle">
    <div class="img_box">
      <img src="./assets/user.jpg" alt="">
    </div>
  </div>
</div>

外層是card容器，視頻和文本內(nèi)容區(qū)域是上下布局的，分別使用box容器包裹，最后是circle容器包裹頭像在定位在中間左邊超出；

注：
video設(shè)置屬性：靜音(muted)可實(shí)現(xiàn)自動(dòng)播放(autoplay)，接著設(shè)置循環(huán)播放(loop)；
img>和video>的父容器是一個(gè)類名img_box；

添加元素樣式

接下來，我們將使用CSS來為個(gè)人主頁介紹卡片添加樣式。以下是一些關(guān)鍵的樣式屬性和技巧，可以使卡片看起來更加漂亮和吸引人；

Base CSS

使用通配符選擇器*來為頁面中的所有元素設(shè)置相同的樣式，清除默認(rèn)樣式，使用怪異盒子模型；
選擇文檔的根元素（HTML中的 <html>）定義顏色CSS變量；
body使用flex把card容器布局在頁面水平、垂直居中；
card使用flex把三個(gè)子容器實(shí)現(xiàn)垂直排列并兩端對(duì)齊；

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --clr: #083d41
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--clr);
}

.card {
  background-color: var(--clr);
  position: relative;

  width: 320px;
  height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 先把容器基本樣式調(diào)整一下 */
.card .box {
  background-color: tomato;
  position: relative;
  
  width: 110%;
  height: 200px;
  /* 文本內(nèi)容區(qū)域圓角 */
  border-radius: 20px;
}

/* 頭像容器則使用定位布局 */
.card .circle {
  width: 180px;
  height: 180px;
  position: absolute;
  left: -70px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 10px solid var(--clr);
}

/* 調(diào)整img和video共有的父容器樣式 */
.card .box .img_box,
.card .circle .img_box {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* img的圓角 */
  border-radius: 50%; 
}
.card .box .img_box {
  /* video的圓角 */
  border-radius: 15px;
}

/* 調(diào)整圖片和視頻的樣式 */
.card .box .img_box video,
.card .circle .img_box img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

視頻區(qū)域CSS

調(diào)整card下的第一個(gè)box容器樣式，也就是包裹視頻的容器：

包圍圖片的邊框部分，優(yōu)化成圓角使其看上去不是那么突兀；
使用::before，::after創(chuàng)建兩個(gè)偽元素用于需要優(yōu)化的兩角；
設(shè)置偽元素的左下角邊框圓角程度與box保持一致，當(dāng)然也可以自行調(diào)整；
最后給偽元素添加陰影效果覆蓋住box的角，然后陰影顏色設(shè)置為與背景色一致，就能實(shí)現(xiàn)了：屬性可設(shè)置的值包括陰影的 X 軸偏移量、Y 軸偏移量、模糊半徑、擴(kuò)散半徑和顏色；比如本次設(shè)置的值對(duì)應(yīng)：X軸偏移-6px Y軸偏移6px 顏色；

.card .box:nth-child(1)::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;
  
  position: absolute;
  z-index: 10;
  top: 106px;
  left: -1px;
  border-bottom-left-radius: 20px;
  box-shadow: -6px 6px var(--clr);
}

/* 樣式同before類似，注意定位樣式 */
.card .box:nth-child(1)::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;
  
  position: absolute;
  z-index: 10;
  bottom: -1px;
  left: 105px;
  border-bottom-left-radius: 20px;
  box-shadow: -6px 6px var(--clr);
}

目前添加樣式效果圖，可以在調(diào)試階段更改明顯色彩用于調(diào)整距離、位置等；

文本內(nèi)容CSS

調(diào)整card下的第二個(gè)box容器樣式，也就是包含文字信息的容器：

包圍圖片的邊框部分，優(yōu)化成圓角樣式同上面類似，部分需要調(diào)整的看代碼；
注意這里設(shè)置的是偽元素的左上角圓角程度，然后添加陰影顏色實(shí)現(xiàn)；
此外，還對(duì)卡片內(nèi)部的標(biāo)題、段落和列表應(yīng)用了特定的樣式，以使其在視覺上更加吸引人；

.card .box:nth-child(2) {
  background-color: #fff;

  width: 100%;
  height: 220px;
}

.card .box:nth-child(2)::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;

  position: absolute;
  z-index: 10;
  bottom: 106px;
  left: -1px;
  border-top-left-radius: 20px;
  box-shadow: -6px -6px var(--clr);
}
.card .box:nth-child(2)::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;

  position: absolute;
  z-index: 10;
  top: -1px;
  left: 109px;
  border-top-left-radius: 20px;
  box-shadow: -6px -6px var(--clr);
}

.card .box .content {
  position: absolute;
  inset: 0;
  padding: 30px 10px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 姓名和Title樣式 */
.card .box .content h2 {
  width: 100%;
  padding-left: 120px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.1em;
  font-size: 1.15em;
  font-weight: 600;
  color: #333;
}
.card .box .content h2 span {
  letter-spacing: 0.05em;
  font-size: 0.75em;
  font-weight: 400;
  color: tomato;
  text-transform: initial;
}

/* 列表樣式 */
.card .box .content ul {
  position: relative;
  top: 15px;

  width: 100%;
  padding: 0 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.card .box .content ul li {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
  font-size: 0.85em;
  font-weight: 500;
  color: #999;
}
.card .box .content ul li:not(:last-child)
{
 border-right: 1px solid #ccc; 
}
.card .box .content ul li span{
  font-size: 1.65em;
  color: #333;
}

/* 按鈕樣式 */
.card .box .content button {
  position: relative;
  top: 25px;
  padding: 8px 30px;
  border: none;
  outline: none;
  background-color: #03a9f4;
  border-radius: 30px;
  color: #fff;
  font-size: 1em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  border: 5px solid var(--clr);
  box-shadow: 0 0 0 10px #fff;
  transition: .5s;
}
.card .box .content button:hover {
  letter-spacing: 0.5em;
  background-color: #ff3d7f;
}

進(jìn)一步優(yōu)化

由于按鈕的圓角與文本內(nèi)容卡片的交界處看上去顯得有些過于突兀了；所以現(xiàn)在把它們的交界處優(yōu)化成弧形，樣式類似box的偽元素，這里也給按鈕創(chuàng)建兩個(gè)偽元素，用于優(yōu)化兩邊的交界處：

.card .box .content button::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;
  position: absolute;
  top: 23px;
  left: -29px;
  border-top-right-radius: 20px;
  box-shadow: 5px -7px #fff;
}

.card .box .content button::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;
  position: absolute;
  top: 23px;
  right: -29px;
  border-top-left-radius: 20px;
  box-shadow: -5px -7px #fff;
}

最后

除了基本樣式之外，還進(jìn)一步優(yōu)化個(gè)人主頁介紹卡片的細(xì)節(jié)。一些可選的技巧包括：

添加過渡效果：通過為button的容器元素添加過渡效果，使卡片在鼠標(biāo)懸停時(shí)平滑地改變樣式(背景色、字符間距)；
使用偽元素添加box-shadow技巧覆蓋比較突兀的地方，使各個(gè)元素之間的交界處有過渡感，可以增加視覺上的吸引力；
通過給元素設(shè)置與body背景相同的顏色，可以使其在頁面中更加突出和立體；

通過運(yùn)用CSS的各種樣式屬性和技巧，我們可以輕松地創(chuàng)建漂亮的個(gè)人主頁介紹卡片。這些卡片不僅能夠有效地展示個(gè)人信息和技能，還能夠吸引訪客的注意力并提供良好的用戶體驗(yàn)。記得嘗試不同的樣式和效果來定制你自己獨(dú)特的個(gè)人主頁卡片！

CSS創(chuàng)作個(gè)人主頁介紹卡片，展示獨(dú)特魅力
原文鏈接：https://juejin.cn/post/7260709771870060603

們?cè)谠O(shè)計(jì)網(wǎng)站的時(shí)候，有時(shí)候?yàn)榱梭w現(xiàn)出別具一格的風(fēng)格，往往會(huì)設(shè)計(jì)出一些特殊的風(fēng)格。這里就舉一個(gè)比較常見的例子 —— 傾斜的背景顏色。

在CSS中，沒有某一個(gè)屬性能夠直接實(shí)現(xiàn)傾斜的背景顏色，而是需要通過一些“手段”來實(shí)現(xiàn)。最常想到的方案就是在內(nèi)容的底部放置一個(gè)div，給這個(gè)div設(shè)定一個(gè)背景顏色，然后讓這個(gè)div傾斜一個(gè)角度，從而實(shí)現(xiàn)傾斜的背景顏色。比如像下圖所示的案例：

那么下面就來用一個(gè)基本的實(shí)例來解釋并實(shí)現(xiàn)傾斜背景的效果：

首先要說明一下，頁面導(dǎo)航條是固定在頁面頂部的，導(dǎo)航條不會(huì)隨著頁面的滾動(dòng)而移動(dòng)。這個(gè)效果的實(shí)現(xiàn)非常簡(jiǎn)單，就是利用了 position 這個(gè)屬性的 fixed 值來實(shí)現(xiàn)的。

我下面的代碼實(shí)例中，HTML用來給頁面上添加元素，而在 CSS 部分需要精細(xì)化的設(shè)定屬性的參數(shù)值，而且需要若干個(gè)HTML標(biāo)簽的CSS來配合，從而實(shí)現(xiàn)傾斜背景的效果。所以我在CSS代碼部分用了比較多的注釋來描述這些屬性的效果和目的，大家在閱讀的時(shí)候可以將 CSS 結(jié)合著 HTML 一起來理解?；蛘呖梢灾苯幽梦业倪@個(gè)實(shí)例作為一個(gè)模板來使用。

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>

    <div class="navbar-bg">
        <ul class="navbar">
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item sign">
                <a href="https://www.baidu.com">Sign</a>
            </li>
        </ul>
    </div>

    <div class="box-bg">
        <div class="box">
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
        </div>
    </div>

    <div class="content">
        <h1>This is content</h1>
    </div>

    <div class="footer">
        <div class="footer-bg">
            <ul class="list">
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
            </ul>
        </div>
    </div>

</body>

</html>

為了讓導(dǎo)航條和其他元素都能夠與頁面的兩邊留出距離，我在實(shí)際內(nèi)容標(biāo)簽的外圍又包裹了一層div，主要在這個(gè)包裹的div里設(shè)定左右內(nèi)間距，從而實(shí)現(xiàn)兩邊留白的效果。這些外圍包裹的 div 的 class 名稱一般都會(huì)有一個(gè)后綴 "-bg"。

在實(shí)際內(nèi)容的排列時(shí)，我采用了更加方便靈活的彈性布局，這樣會(huì)相對(duì)的減少HTML和CSS的代碼量。

另外，如果想要實(shí)現(xiàn)傾斜的背景顏色，那么這些帶有 bg 后綴的 div 就是需要傾斜的標(biāo)簽。傾斜這些 div 其實(shí)很簡(jiǎn)單，只需要設(shè)定一個(gè) transform: skew(0deg, -9deg) 這樣的CSS代碼即可，但是我們可以想象一下，原本是長(zhǎng)方形的 div 按照 Y 軸逆時(shí)針旋轉(zhuǎn)了一個(gè)弧度（-9deg）后，它會(huì)變成一個(gè)平行四邊形，這個(gè)平行四邊形是左邊低右邊高。這樣就會(huì)露出它后面的白色的 body 的部分。所以這種玩法麻煩的地方就是如何通過多個(gè) CSS 屬性的配合來遮住露出的白色的body部分。下面就來看一下這個(gè)HTML對(duì)應(yīng)的 CSS 代碼部分。

在大家閱讀 CSS 的代碼之前，我給出一個(gè)原理圖來解釋一下其中的原理：

當(dāng)外圍的 div 傾斜了之后，就需要把內(nèi)容部分的div的上部的內(nèi)間距增大，以此來遮住平行四邊形的左側(cè)露出的白色區(qū)域。這是頁面上部區(qū)域的原理。

那么頁面底部也同樣需要實(shí)現(xiàn)這樣傾斜背景顏色的設(shè)計(jì)，這樣才能將風(fēng)格一致，產(chǎn)生美感。原理還是這個(gè)原理圖所示的邏輯，不同的地方在于，底部最外圍的 div 不傾斜，而是需要兩個(gè)屬性，height 和 overflow-y，并且這個(gè) div 不能帶有背景顏色。它們的作用是當(dāng)它里面的內(nèi)容超出這個(gè) div 的區(qū)域時(shí)就不顯示，這樣就會(huì)讓上圖中藍(lán)色的平行西變形的左下角區(qū)域被紅色的框線裁剪掉，從而讓這個(gè)div 乖乖的呆在頁面的底部。而這個(gè) div 里面一層的 div 需要讓它傾斜，而且還帶有一個(gè)背景顏色。這樣組合出來的效果就是一個(gè)看似是左右兩邊是豎線，下部是橫線，只有上部是斜線的帶有背景顏色的四邊形，這個(gè)四邊形里面是實(shí)際的頁面內(nèi)容。

最終的樣子在這篇 CSS 代碼的最后展示出來了。

CSS

在線咨詢

上一篇：div之間margin問題
下一篇：設(shè)計(jì)整理與分享一波設(shè)計(jì)資源網(wǎng)站，在線工具網(wǎng)站

您的項(xiàng)目需求

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

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

css基礎(chǔ)必備-元素背景，前端小白一看就會(huì)