css基本样式之背景样式

最新推荐文章于 2024-08-24 10:33:39 发布

SSS4362

最新推荐文章于 2024-08-24 10:33:39 发布

阅读量401

点赞数 2

分类专栏： java web基础知识文章标签： css css3 html 基本样式背景样式

本文链接：https://blog.csdn.net/SSS4362/article/details/125419719

版权

java web基础知识专栏收录该内容

18 篇文章 0 订阅

订阅专栏

css基本样式之背景样式

1.代表背景样式的单词

background,字体样式前面都加上background-

2.设置背景颜色

2.1 语法

background-color:颜色值;
/*
  颜色值可以是名字、rgb色、#ffffff
  可以用取色器去取出颜色
*/

2.2 不加background-color的效果

在这里插入图片描述

2.3 加background-color的效果

在这里插入图片描述

2.4 源代码

<!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>background-color的使用</title>
    <style type="text/css">
        p{
            width: 100px;
            height: 20px;
            background-color: seagreen;
        }
    </style>
</head>
<body>
     <p>核心</p>
</body>
</html>

3.设置背景图片

3.1语法

background-image:url(图片路径);
/*
 建议为相对路径
*/

3.2 不加background-image的效果

在这里插入图片描述

3.3 加background-image的效果

在这里插入图片描述

3.4 源代码

<!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>background-image的使用</title>
    <style type="text/css">
        p{
            width: 200px;
            height: 200px;
            background-image:url(杰伦.jpg);
        }
    </style>
</head>
<body>
     <p>核心</p>
</body>
</html>

4.设置背景图片是否平铺

4.1 语法

background-repeat:平铺方式;
/*
  repeat(默认)---->上下左右全都平铺
  no-repeat不平铺
  repeat-x 水平平铺
  repeat-y 垂直平铺
*/

4.2 不加background-repeat的效果

在这里插入图片描述

4.3 加background-repeat的效果

在这里插入图片描述

4.4 源代码

<!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>background-image的使用</title>
    <style type="text/css">
        p{
            width: 200px;
            height: 200px;
            background-image:url(杰伦.jpg);
            /* 为了让效果更明显的展示出来 */
            background-size: 50% 50%;
            background-repeat:no-repeat;
        }
    </style>
</head>
<body>
     <p>核心</p>
</body>
</html>

5.设置背景的位置

5.1 语法

background-position: 水平坐标 垂直坐标;
/* 
  水平方向上,右正负左,垂直方向上,下正上负数
  其中某值可以省略,但是初学者不建议省略
  设置背景图像的起始位置
  参考系是以设置背景图片的标签为参考系,另外这个设置位置是和背景图片有关的
*/

5.2 不加background-position的效果

在这里插入图片描述

5.3 加background-position的效果

在这里插入图片描述

5.4 源代码

<!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>background-image的使用</title>
    <style type="text/css">
        p{
            width: 200px;
            height: 200px;
            background-image: url(杰伦.jpg);
            background-position: 10px 10px;
            background-repeat: no-repeat;
            background-size: 50px 50px;
            background-color: red;
        }
    </style>
</head>
<body>
     <p>核心</p>
    <!-- 
       图片若显示不出来,就直接自行从网站下载即可。注意图片资源的下载不是最重要的,而是应该掌握其中最重要的东西。
    -->
</body>
</html>

6.设置背景图片固定

6.1 语法

background-attachment: 固定方式;
/* 
   fixed指的是背景图片是不会跟随滚动条进行滚动的
   scroll值的是会和滚动条移动
*/

6.2 值为scroll(内容溢出时有滚动条)的情况

在这里插入图片描述

6.3 值为fixed(固定)的情况

在这里插入图片描述

6.4 源代码

<!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>background-image的使用</title>
    <style type="text/css">
        p{
            /* width: 200px; */
            height: 200px;
            width: 190%;
            background-image: url(杰伦.jpg);
            background-position: 10px 10px;
            background-repeat: no-repeat;
            background-size: 50px 50px;
            background-attachment: fixed;
            background-color: red;
            
        }
    </style>
</head>
<body>
     <p>核心</p>
     <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
</body>
</html>

7.合并样式的书写

7.1 语法

background: color image repeat attachment position;
/* 
  color--背景颜色,image背景图片
  repeat-->背景图片是否平铺 
  attachement 图片是否随着滚轮移动
  position元素相当于当前标签的位置
*/

7.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>background-image的使用</title>
    <style type="text/css">
        p{
            height: 400px;
            width:500px;
            background: yellow url(img/杰伦.jpg)  10px 20px/50% no-repeat fixed ;
            /* 不分书写的顺序,浏览器都能识别,建议按照一定的顺序去写 */
            /* background-size: 50% 50%; */
            /* bg-color bg-image position/bg-size bg-repeat  bg-attachment */
            
        }
    </style>
</head>
<body>
     <p>核心</p>
     <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
</body>
</html>