13、背景图像应用及渐变

最新推荐文章于 2024-09-05 21:51:51 发布

工一木子

最新推荐文章于 2024-09-05 21:51:51 发布

阅读量105

点赞数

分类专栏： CSS学习文章标签： css html html5

本文链接：https://blog.csdn.net/Prince140678/article/details/120385260

版权

CSS学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

3.7、背景

背景颜色

背景图片

 div {
                width: 1000px;
                height: 700px;
                border: 1px solid red;
                background-image: url("images/QQ.jpg");
                /*默认是全部平铺的 repeat*/
            }
            .div1 {
                background-repeat: repeat-x;
            }
            .div2 {
                background-repeat: repeat-y;
            }
            .div3 {
                background-repeat: no-repeat;
            }

练习：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XkYG2hF9-1632059672682)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\13、背景图像应用及渐变.assets\image-20210919212725105.png)]$

核心代码:

/*颜色，图片， 图片位置， 平铺方式*/
background: red url("../images/d.jpg") 270px 10px no-repeat;

background-image: url("../images/r.jpg");
background-repeat: no-repeat;
background-position: 200px 2px;

代码结构：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rqq9X7lw-1632059672685)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\13、背景图像应用及渐变.assets\image-20210919213728754.png)]$

效果图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kwTOW7Bk-1632059672687)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\13、背景图像应用及渐变.assets\image-20210919213642149.png)]$

3.8、渐变

background-color:#FFFFFF;
background-image:linear-gradient(115deg,#FFFFFF 0%,#6284FF 50%,#FF0000 100%)

代码show

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
<!--        径向渐变，圆形渐变-->
        <style>
            body {
                /*background-color:#FFFFFF;*/
                background-image:linear-gradient(19deg,#24D4FD 0%,#B721FF 100%)
            }
        </style>
    </head>
    <body>
<!--        渐变，哈哈-->
    </body>
</html>

效果图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3aDXWf4j-1632059672690)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\13、背景图像应用及渐变.assets\image-20210919215035957.png)]$

把body中文字取消注释效果图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YVm2NuiP-1632059672693)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\13、背景图像应用及渐变.assets\image-20210919215103338.png)]$

彩蛋

1.css就是前端边改边调试

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9NU9ZeI7-1632059672695)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\13、背景图像应用及渐变.assets\image-20210919213509076.png)]$

2.画渐变的网站

渐变网站 github开源项目，本地可以搭建起来

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q62iIQ55-1632059672696)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\13、背景图像应用及渐变.assets\image-20210919214521637.png)]$

可以直接复制css代码

3.修改百度首页背景色

未修改前：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8aqjQ9UZ-1632059672698)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\13、背景图像应用及渐变.assets\image-20210919215402696.png)]$

修改后：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cbh4eq7O-1632059672699)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\13、背景图像应用及渐变.assets\image-20210919215342279.png)]$

工一木子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
13、背景图像应用及渐变

3.7、背景背景颜色背景图片 div { width: 1000px; height: 700px; border: 1px solid red; background-image: url("images/QQ.jpg"); /*默认是全部平铺的 repeat*/ } .div1 {
复制链接

扫一扫

专栏目录