认识CSS之背景

已于 2023-03-12 16:30:30 修改
阅读量418 收藏
点赞数
分类专栏： 前端只因变凤凰之路 文章标签： css html 前端 css的背景 css设置背景 Powered by 金山文档
于 2023-03-12 16:29:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62588253/article/details/129458824
版权
🌟 所属专栏：前端只因变凤凰之路
🐔 作者简介：rchjr——五带信管菜只因一枚
😮 前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉 文章简介：本文介绍CSS背景相关知识。知识学习内容来自b站的 @黑马程序员 的视频

🔥1 背景颜色

background-color属性定义了元素的背景颜色。一般情况下背景颜色默认是transparent（透明的），我们也可以手动指定背景颜色为透明的。

<!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>
    <style>
        div {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>
        我是背景颜色
    </div>
</body>

</html>

🔥2 背景图片

background-image属性描述了元素的背景图片。实际开发常见与logo、小的装饰性图片、超大背景图片。优点在于非常便于控制位置。

<!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>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-image: url("images/王者荣耀.png")
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

上述就是设置背景图片后的效果，但是我们发现图片重复了，这时候就需要让图片平铺。

🔥3 背景平铺

背景平铺就是让图片重复填满元素，而且默认的都是平铺。

background-repeat：有四个属性，可以选择平铺或者不平铺；可以选择在横向或者纵向平铺

<!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>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-image: url("images/王者荣耀.png");
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</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>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-image: url("images/王者荣耀.png");
            background-repeat: repeat-x;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</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>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-image: url("images/王者荣耀.png");
            background-repeat: repeat-x;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

🔥 背景图片的位置控制

利用background-position属性客户以改变图片在背景中的位置。

background-position：x，y。其中x，y分别是横纵坐标。可以使用方位名词（top、bottom、center、left、right）也可以使用精确的单位（px）来进行设置。

规则（重要）

  1. 属性值为方位名词

  • x，y都为方位名词，则书写的前后顺序无关。如top center和center top是一样的

<!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>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-image: url("images/王者荣耀.png");
            background-repeat: repeat-x;
            background-color: pink;
            background-position: top center;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

  • 如果只有一个方位名词，则另一个默认居中对齐（如只写一个left）

<!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>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-image: url("images/王者荣耀.png");
            background-repeat: no-repeat;
            background-color: pink;
            background-position: left;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>
应用案例1-设置小的logo
<!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>
    <style>
        h3 {
            height: 40px;
            width: 118px;
            font-size: 12px;
            font-weight: 400;
            line-height: 40px;
            background-image: url("logo.png");
            background-repeat: no-repeat;
            background-position: left center;
        }
    </style>
</head>
<div>
    <h3>
        成长守护平台
    </h3>
</div>

<body>

</body>

</html>
应用案例2-设置大的背景图片
<!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>
    <style>
        body {
            background-image: url(画中仙.jpg);
            background-repeat: no-repeat;
            background-position: center top;
        }
    </style>
</head>

<body>

</body>

</html>

可以显示主要部分

方法一般就是center top

2. 属性值为精确单位

如果参数是精确坐标，那么第一个一定是x坐标，第二个一定是y坐标。

如果只写了一个值，那么第一个一定是x坐标，另一个默认垂直居中。

如果一个值在前面，方位名词在后面，那么第一个是x坐标，另一个垂直居中

如果方位名词在前，值在后则方位名词是x，值对应y

<!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>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-repeat: no-repeat;
            background-position: center 20px;
            background-image: url(logo.png);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

🔥4 综合案例-五彩导航栏

就是实现在div中放置盒子，然后设置背景图片，并加上链接伪类选择器，实现点击不同的盒子实现不同的图片呈现。

<!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>
    <style>
        .nav a {
            display: inline-block;
            width: 300px;
            height: 330px;
            text-decoration: none;
            background-color: pink;
            color: white;
            line-height: 20px;
            text-align: center;
        }

        .nav .bg1:hover {
            background: url(message.png) no-repeat;
        }
    </style>
</head>
<div class="nav">
    <a href="#" class="bg1">五彩导航</a>
    <a href="#">五彩导航</a>
</div>

<body>

</body>

</html>

（没找合适的图片，凑合着看吧~）

诺坎普的风间
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
全屏css,CSS之全屏背景图
weixin_36338765的博客
08-04 851
吐槽啦：Yeah 明天就是国庆了o(*￣▽￣*)o！哈哈，提前祝福各位园友国庆快乐、假期愉快、生活美满、天天开心！国庆我要回家一趟，把一些不用的东西带回家，走访一下亲朋好友，在家打几天酱油~~~言归正传，我们回到我们的主题来看看CSS之全屏背景图。Nowdays，满屏大图的网页成为了一种fashion，网页的模板、布局是用CSS、HTML……来设计的，这里就以CSS来聊全屏背景图。简单点，对于全...
css 背景颜色默认,css改变文字选择时的默认背景颜色
weixin_35068077的博客
08-03 2611
一、css改变文字选择时的默认背景颜色网页上的文本选择时，一般会出现蓝色的背景，这貌似是微软默认的，如果想改变这个颜色，定义CSS：::selection{background: #A8141B; color: white; /* Safari */} ::-moz-selection{background: #A8141B; color: white; /* Firefox */ }注意：这只能...
认识CSS之元素显示模式
榕城候佳人的博客
03-10 952
网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局网页。所以元素显示模式就是元素（标签）以什么方式进行显示，比如自己占一行，一行可以放多个等。HTML主要分为块元素和行内元素😃。
认识CSS
weixin_61436104的博客
06-29 607
认识css
一文带你认识CSS
未见花闻的博客
05-20 1203
本篇文章将介绍一些CSS相关的知识，CSS能够将HTML页面优化，变得更加的细腻，并且页面的创造性更高，可以理解为“化妆术”。
边框给背景图css怎么写,使用css设置边框背景图片
weixin_35566895的博客
08-03 4708
使用css的特有属性，给不同的盒子添加边框图片。为什么会有这一场景呢。因为，UI给我们前端的边框图片可能未必适合我们当前的内容。这里我们主要使用到的属性有：border-image-sourceborder-image-sliceborder-top-widthborder-image-repeat个别属性可以根据自己的个人情况决定是否添加，希望使用的时候自己甄别。切边框图片的顺序:下面是我的代码...
认识css
Shao_mou_ren的博客
11-05 393
1. 认识css CSS 通常称为 CSS 样式表或层叠样式表（级联样式表），主要用于设置 HTML 页 面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边 距等）以及版面的布局等外观显示样式。 CSS 以 HTML 为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排 版等，而且还可以针对不同的浏览器设置不同的样式。 HTML 超文本标记/标签语言 结构层...
CSS初步认识2
jinxinlele的博客
07-24 790
块级元素的特点比较霸道，自己独占一行。高度，宽度、外边距以及内边距都可以控制。宽度默认是容器（父级宽度）的100%。是一个容器及盒子，里面可以放行内或者块级元素。文字类的元素内不能放块级元素一个模式的元素需要另外一种模式的特性​ 比如想要增加链接 的触发范围。转换方式转换为块元素：display:block;转换为行内元素：display:inline;转换为行内块：display: inline-block;
初步认识css(1)
qq_64782704的博客
07-20 828
HTML是网页的内容,css就是定义网页内容的样式。
CSS之Position全面认识
12-12
CSS的很多其他属性大多容易理解，比如字体，文本，背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍，而偏偏忽略了对一些难缠的属性讲解，有避重就轻的嫌疑。CSS中主要难以理解的属性包括盒型结构，以及...
认识css样式
07-29
【标题】：“认识CSS样式” CSS（Cascading Style Sheets）是层叠样式表的缩写，它是网页设计中用于控制网页布局和外观的关键技术。CSS允许我们将样式信息与HTML或XML文档内容分离，使页面设计更加灵活和可维护。...
利用CSS定位背景图片的常用方法总结
01-21
本文先暂时抛弃那种方案，给大家分享几种CSS背景图片定位的方案。 1.无依赖的absolute定位 在网络上，对absolute存在这样一个误解，认为绝对定位absolute的使用必须要设置父元素相对定位relative。这样的理解不能...
CSS3小朋友认识字母游戏纯css3实现特效代码
03-20
【标题】"CSS3小朋友认识字母游戏纯css3实现特效代码"揭示了这个项目的核心——使用CSS3技术为儿童设计的一款字母认知游戏。CSS3是层叠样式表（Cascading Style Sheets）的第三版，它引入了许多新的特性和功能，使得...
使用 Tailwind CSS 实现水平和垂直居中对齐的方法
Chloeeeeeeee的博客
08-20 244
使用 Tailwind CSS 实现水平和垂直居中对齐的方法有：1. 使用 flex 布局；2. 使用 grid 布局；3. 使用绝对定位
CSS中的元素布局与定位详细说明
最新发布
weixin_43354152的博客
08-24 605
在CSS开发中，很重要的一个工作就是根据UI设计稿，进行元素的布局与定位，使得元素（比如某一段文本、按钮、图片等）显示在页面正确的位置。本文就元素的布局与定位方面，做一些讲解和说明。
CSS有趣知识
weixin_42376775的博客
08-20 263
5.分开写：border-top-ldft-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius。2.如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%4.该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角、右下角、左下角。CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。3.如果是个矩形，设置为高度的一半就可以做。
PHP 实战：动态更改 CSS 值
Rverdoser的博客
08-21 321
这段代码演示了如何在PHP中动态设置CSS变量的值，并在HTML文档中使用这些变量。它使用CSS自定义属性（也称为CSS变量），然后通过。选择器在文档的任何地方使用它们。这样做可以让你在不修改CSS文件的情况下，根据用户的不同或其他上下文来改变样式。
理解CSS3的background-clip和background-origin
"认识CSS3和HTML5 - 了解CSS3中的background-clip和background-origin属性" 在Web开发中，HTML5和CSS3是现代网页设计不可或缺的组成部分，它们提供了更强大的功能和更丰富的视觉效果。HTML5带来了许多新的元素和API...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

诺坎普的风间

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值