CSS学习记录10/背景图片定位/多重背景图片/多重背景图片练习/CSS书写格式

最新推荐文章于 2024-04-02 12:21:45 发布

小婵婵不怕鬼

最新推荐文章于 2024-04-02 12:21:45 发布

阅读量356

点赞数 1

分类专栏： css学习文章标签： css 学习前端

本文链接：https://blog.csdn.net/qq_49080239/article/details/125568334

版权

css学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

什么是背景尺寸属性？
专门用于设置背景图片大小的属性。
例：

/*默认*/
        ul li:nth-child(1){
            background: url("images/xiaotubiao.webp") no-repeat;
        }
        /*像素：第一个参数是宽度，第二个参数是高度*/
        ul li:nth-child(2){
            background: url("images/xiaotubiao.webp") no-repeat;
            background-size: 70px 100px;
        }
        /*百分数*/
        ul li:nth-child(3){
            background: url("images/xiaotubiao.webp") no-repeat;
            background-size: 70% 50%;
        }
        /*宽度等比拉伸*/
        ul li:nth-child(4){
            background: url("images/xiaotubiao.webp") no-repeat;
            background-size: auto 100px;
        }
        /*宽度等比拉伸*/
        ul li:nth-child(5){
            background: url("images/xiaotubiao.webp") no-repeat;
            background-size: 50px auto;
        }
        ul li:nth-child(6){
            background: url("images/xiaotubiao.webp") no-repeat;
            background-size: cover;
            /*1、这张图片需要等比拉伸 2、图片需要等比拉伸到宽度和高度填满整个元素*/
        }
        ul li:nth-child(7) {
            background: url("images/xiaotubiao.webp") no-repeat;
            background-size: contain;
            /*1、这张图片需要等比拉伸 2、图片需要等比拉伸到宽度或高度填满元素*/
        }

在这里插入图片描述
背景图片定位：告诉系统背景图片从哪里开始显示。
例：

ul li:nth-child(2){
            /*告诉系统背景图片从什么区域开始显示，默认情况下，图片是从padding开始显示*/
            background-origin: padding-box;
        }
        /*图片是从border开始显示*/
        ul li:nth-child(3){
            background-origin: border-box;
        }
        /*图片是从content开始显示*/
        ul li:nth-child(4){
            background-origin: content-box;
        }

在这里插入图片描述
背景绘制区域：专门用于控制从哪个区域开始绘制背景。
默认情况下，背景颜色是从border开始绘制，可以用background-clip: 取值;来指定。
取值：
border-box 、padding-box、content-box

多重背景图片：多张背景图片用逗号隔开
例：

background: url("images/fj") no-repeat left top,url("images/fj2") no-repeat right top,url("images/fj3") no-repeat left bottom,url("images/fj4") no-repeat right bottom;

注意点：
1、先添加的背景图片会盖住后添加的背景图片。
2、建议在编写多重背景时拆开编写。
例：

background-image: url("images/fj"),url("images/fj2");
            background-repeat: no-repeat,no-repeat;
            background-position: left top,right top;

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多重背景图片练习</title>
    <style>
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
        form,fieldset,input,textarea,p,blockquote,th,td {
            padding: 0;
            margin: 0;
        }
        div{
            width: 600px;
            height: 190px;
            border: 1px solid #000;
            margin: 100px auto;
            background-color: skyblue;
            background-image: url("images/huahua.png"),url("images/taiyang.png"),url("images/yunduo.png");
            background-repeat: no-repeat,no-repeat,repeat-x;
            background-position: 50px 100px,450px 20px,0 30px;
            animation: move 10s linear 0s infinite normal;
        }
        @keyframes move {
            from{
                background-position: 50px 100px,450px 20px,0 30px;
            }
            to{
                background-position: 350px -20px,450px 20px,-600px 30px;
            }
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

结果：
多重背景图片练习
CSS书写格式：
1、行内样式：直接将CSS代码写在开始标签中

例：<div style="color: #ffcaf3"></div>

2、内嵌样式：可以在一对head标签中写上一对style标签，然后在style标签中编写代码。

<style>
        div{
            color: blue;
        }
    </style>

3、外链样式：（推荐）
新建stylesheet文件，.html文件一对head内写上<link rel="stylesheet" href="CSS文件名.css">，即在创建的CSS文件里编写样式。
4、导入样式：
在一对head标签中写上一对style标签，然后在style标签中编写@import "CSS文件名.css";，即在创建的CSS文件里编写样式。

外链样式和导入样式的区别：
1、外链样式通过link标签关联，导入样式通过@import关联，而@import是CSS2.1推出，所以有兼容问题。
2、外链样式在显示界面的时候，会先加载CSS样式再加载结构，所以用户看到界面时一定设置了样式，导入样式在显示界面的时候，会先加载结构，加载样式，所以用户看到界面时不一定设置了样式。

从零开始编写一个网站：
1、创建站点文件夹，并且创建一些子文件夹和子文件。创建的站点文件夹可以是中文，但是站点文件夹里面的子文件夹和子文件不能出现中文。
在这里插入图片描述
2、重置所有默认的样式，设置一些全局样式，并且将设置样式的css文件和对应的界面关联起来。

/*1、清空默认样式*/
html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit
}
input,textarea,select{*font-size:100%}
legend{color:#000}
a{text-decoration: none;}

/*2、设置全局样式*/
body{
    font-family: '微软雅黑';
    font-size: 12px;
    color: #999;
    background-color: #f5f5f5;
}

<!--将设置样式的css文件和对应的界面关联起来-->
    <link rel="stylesheet" href="CSS/base.css">

可以直接拖拽css文件。

小婵婵不怕鬼

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS学习记录10/背景图片定位/多重背景图片/多重背景图片练习/CSS书写格式

什么是背景尺寸属性？专门用于设置背景图片大小的属性。例：背景图片定位：告诉系统背景图片从哪里开始显示。例：背景绘制区域：专门用于控制从哪个区域开始绘制背景。默认情况下，背景颜色是从border开始绘制，可以用background-clip: 取值;来指定。取值：border-box 、padding-box、content-box多重背景图片：多张背景图片用逗号隔开例：注意点：1、先添加的背景图片会盖住后添加的背景图片。2、建议在编写多重背景时拆开编写。例：练习：结果：
复制链接

扫一扫