CSS3 -- API学习 (背景)

最新推荐文章于 2022-11-03 14:59:07 发布

坤少的IT之路

最新推荐文章于 2022-11-03 14:59:07 发布

阅读量175

点赞数

分类专栏： CSS 文章标签： Web CSS

本文链接：https://blog.csdn.net/qq_39456689/article/details/89001744

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

background:

①background: red; （颜色或者url）

②background: red top left no-repeat; 相当于background、position、repeat加一起一样

background-position: 左上(left top) 右上(right top) 右下(right bottom) 左下(left bottom)

background-repeat: repeat no-repeat

background-image: url('')

background-size: 0px 0px; (宽高)（背景是图片的时候使用）

background-origin:border-box padding-box context-box (用于背景是图片的时候)

background-clip: border-box padding-box context-box (用于背景是颜色的时候)

例子

1.背景颜色

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           div {
               border: 1px solid black;
               width: 100px;
               height: 100px;
               background: red;
               }
       </style>
   </head>
   <body>
       <div>sfdfdfdfd</div>
   </body>
</html>

结果：

2.背景图片

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           div {
               border: 1px solid black;
               width: 100px;
               height: 100px;
               background: url(u=1291417747,3760118869&fm=26&gp=0.jpg);
               background-repeat: no-repeat;
               }
       </style>
   </head>
   <body>
       <div></div>
   </body>
</html>

结果：

3.背景大小

①background-size:20px 20px;

②background-size:100% 100%; 填充满背景

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           div {
               border: 1px solid black;
               width: 100px;
               height: 100px;
               background: url(u=1291417747,3760118869&fm=26&gp=0.jpg);
               background-size: 100% 100%;
               background-repeat: no-repeat;
               }
       </style>
   </head>
   <body>
       <div></div>
   </body>
</html>

结果：

与上一个对比可以看出，不同

4.background-origin

①border-box 在盒子边框开始

②padding-box 在盒子内边距开始

③context-box 在盒子内容开始

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           div {
               border: 1px solid black;
               padding: 30px;
               width: 100px;
               height: 100px;
               background: url(u=1291417747,3760118869&fm=26&gp=0.jpg);
               background-size: 30px 30px;
               background-repeat: no-repeat;
               background-origin: padding-box;
               }
       </style>
   </head>
   <body>
       <div>ddfdff</div>
   </body>
</html>

结果：

clip和origin一样的效果，只不过clip修饰的是颜色。clip=context-box的结果

坤少的IT之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 -- API学习 (背景)

background:①background: red; （颜色或者url）②background: red top left no-repeat; 相当于background、position、repeat加一起一样background-position: 左上(left top) 右上(right top) 右下(right bottom) 左下(left b...
复制链接

扫一扫