整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

css基础必备-元素背景,前端小白一看就会

css基础必备-元素背景,前端小白一看就会

素背景background

使用CSS设置各种HTML元素的背景,元素的背景有以下属性:

  • background-color - 属性用于设置元素的背景色,值可以是十六进制颜色代码,RGB值或颜色名称。
  • background-image - 属性用于设置元素的背景图像,使用url()属性指定图像的路径。
  • background-repeat - 属性用于控制背景图像是否重复,值有repeat,repeat-x,repeat-y,no-repeat。
  • background-position - 属性用于控制背景图像的位置,值有right,left,top,bottom,center或者数值和百分比。
  • background-attachment - 属性用于控制背景图像是否可以滚动,值有scroll,fixed。
  • background - 属性用作其他背景属性的简写。

设置背景颜色:

设置背景图像:

设置背景图像沿x轴重复:

设置图像不重复,位于右上角:

设置图像不重复,不随内容滚动:

如果需要指定的图像属性太多时,可采用简写形式,如:

使用背景简写时,属性的指定顺序如下所示:

在现代网页设计中,个人主页是一个展示个人信息、技能、事件等的重要载体。为了吸引访客的注意力并提供良好的用户体验,设计师通常会运用各种技巧和效果来增加页面的吸引力。本文将介绍如何使用CSS创建一个惊叹的个人主页介绍卡片,展示独特魅力;

PREVIEW

创建HTML结构

首先,需要定义基本的HTML结构来容纳个人主页介绍卡片;

这里外层使用一个div包裹,里面使用三个<div>元素作为包裹容器布局,并在其中添加所需的图像、内容和按钮等:

<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容器,视频和文本内容区域是上下布局的,分别使用box容器包裹,最后是circle容器包裹头像在定位在中间左边超出;

注:

video设置属性:静音(muted)可实现自动播放(autoplay),接着设置循环播放(loop);

img>和video>的父容器是一个类名img_box;

添加元素样式

接下来,我们将使用CSS来为个人主页介绍卡片添加样式。以下是一些关键的样式属性和技巧,可以使卡片看起来更加漂亮和吸引人;

Base CSS

  • 使用通配符选择器*来为页面中的所有元素设置相同的样式,清除默认样式,使用怪异盒子模型;
  • 选择文档的根元素(HTML中的 <html>)定义颜色CSS变量;
  • body使用flex把card容器布局在页面水平、垂直居中;
  • card使用flex把三个子容器实现垂直排列并两端对齐;
* {
  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;
}

/* 先把容器基本样式调整一下 */
.card .box {
  background-color: tomato;
  position: relative;
  
  width: 110%;
  height: 200px;
  /* 文本内容区域圆角 */
  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);
}

/* 调整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;
}

/* 调整图片和视频的样式 */
.card .box .img_box video,
.card .circle .img_box img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

视频区域CSS

调整card下的第一个box容器样式,也就是包裹视频的容器:

  • 包围图片的边框部分,优化成圆角使其看上去不是那么突兀;
  • 使用::before,::after创建两个伪元素用于需要优化的两角;
  • 设置伪元素的左下角边框圆角程度与box保持一致,当然也可以自行调整;
  • 最后给伪元素添加阴影效果覆盖住box的角,然后阴影颜色设置为与背景色一致,就能实现了: 属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色; 比如本次设置的值对应: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);
}

目前添加样式效果图,可以在调试阶段更改明显色彩用于调整距离、位置等;

文本内容CSS

调整card下的第二个box容器样式,也就是包含文字信息的容器:

  • 包围图片的边框部分,优化成圆角样式同上面类似,部分需要调整的看代码;
  • 注意这里设置的是伪元素的左上角圆角程度,然后添加阴影颜色实现;
  • 此外,还对卡片内部的标题、段落和列表应用了特定的样式,以使其在视觉上更加吸引人;


.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;
}

进一步优化

由于按钮的圆角与文本内容卡片的交界处看上去显得有些过于突兀了; 所以现在把它们的交界处优化成弧形,样式类似box的伪元素,这里也给按钮创建两个伪元素,用于优化两边的交界处:

.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;
}

最后

除了基本样式之外,还进一步优化个人主页介绍卡片的细节。一些可选的技巧包括:

  • 添加过渡效果:通过为button的容器元素添加过渡效果,使卡片在鼠标悬停时平滑地改变样式(背景色、字符间距);
  • 使用伪元素添加box-shadow技巧覆盖比较突兀的地方,使各个元素之间的交界处有过渡感,可以增加视觉上的吸引力;
  • 通过给元素设置与body背景相同的颜色,可以使其在页面中更加突出和立体;

通过运用CSS的各种样式属性和技巧,我们可以轻松地创建漂亮的个人主页介绍卡片。这些卡片不仅能够有效地展示个人信息和技能,还能够吸引访客的注意力并提供良好的用户体验。记得尝试不同的样式和效果来定制你自己独特的个人主页卡片!


CSS创作个人主页介绍卡片,展示独特魅力
原文链接:https://juejin.cn/post/7260709771870060603

们在设计网站的时候,有时候为了体现出别具一格的风格,往往会设计出一些特殊的风格。这里就举一个比较常见的例子 —— 倾斜的背景颜色。

在CSS中,没有某一个属性能够直接实现倾斜的背景颜色,而是需要通过一些“手段”来实现。最常想到的方案就是在内容的底部放置一个div,给这个div设定一个背景颜色,然后让这个div倾斜一个角度,从而实现倾斜的背景颜色。比如像下图所示的案例:

那么下面就来用一个基本的实例来解释并实现倾斜背景的效果:

首先要说明一下,页面导航条是固定在页面顶部的,导航条不会随着页面的滚动而移动。这个效果的实现非常简单,就是利用了 position 这个属性的 fixed 值来实现的。

我下面的代码实例中,HTML用来给页面上添加元素,而在 CSS 部分需要精细化的设定属性的参数值,而且需要若干个HTML标签的CSS来配合,从而实现倾斜背景的效果。所以我在CSS代码部分用了比较多的注释来描述这些属性的效果和目的,大家在阅读的时候可以将 CSS 结合着 HTML 一起来理解。或者可以直接拿我的这个实例作为一个模板来使用。

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>

为了让导航条和其他元素都能够与页面的两边留出距离,我在实际内容标签的外围又包裹了一层div,主要在这个包裹的div里设定左右内间距,从而实现两边留白的效果。这些外围包裹的 div 的 class 名称一般都会有一个后缀 "-bg"

在实际内容的排列时,我采用了更加方便灵活的弹性布局,这样会相对的减少HTML和CSS的代码量。

另外,如果想要实现倾斜的背景颜色,那么这些带有 bg 后缀的 div 就是需要倾斜的标签。倾斜这些 div 其实很简单,只需要设定一个 transform: skew(0deg, -9deg) 这样的CSS代码即可,但是我们可以想象一下,原本是长方形的 div 按照 Y 轴逆时针旋转了一个弧度(-9deg)后,它会变成一个平行四边形,这个平行四边形是左边低右边高。这样就会露出它后面的白色的 body 的部分。所以这种玩法麻烦的地方就是如何通过多个 CSS 属性的配合来遮住露出的白色的body部分。下面就来看一下这个HTML对应的 CSS 代码部分。

在大家阅读 CSS 的代码之前,我给出一个原理图来解释一下其中的原理:

当外围的 div 倾斜了之后,就需要把内容部分的div的上部的内间距增大,以此来遮住平行四边形的左侧露出的白色区域。这是页面上部区域的原理。

那么页面底部也同样需要实现这样倾斜背景颜色的设计,这样才能将风格一致,产生美感。原理还是这个原理图所示的逻辑,不同的地方在于,底部最外围的 div 不倾斜,而是需要两个属性,height 和 overflow-y,并且这个 div 不能带有背景颜色。它们的作用是当它里面的内容超出这个 div 的区域时就不显示,这样就会让上图中蓝色的平行西变形的左下角区域被红色的框线裁剪掉,从而让这个div 乖乖的呆在页面的底部。而这个 div 里面一层的 div 需要让它倾斜,而且还带有一个背景颜色。这样组合出来的效果就是一个看似是左右两边是竖线,下部是横线,只有上部是斜线的带有背景颜色的四边形,这个四边形里面是实际的页面内容。

最终的样子在这篇 CSS 代码的最后展示出来了。

CSS