36、背景

最新推荐文章于 2022-03-01 17:36:12 发布

五仁卤鸡翅

最新推荐文章于 2022-03-01 17:36:12 发布

阅读量137

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/MoonNight608/article/details/107482782

版权

css 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章目录

介绍
背景

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

背景

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
.box1{
    width:500px;
    height:500px;
      1、background-color:设置背景颜色
       
      2、background-image: 设置背景图片
           - 可以同时设置背景颜色和背景图片
           - 如果背景图片小于元素，则背景图片会自动在元素中平铺，将元素铺满
           - 如果图片大于元素，则会一部分无法完全显示
           - 如果一样大，则会直接正常显示
      3、background-repeat: 设置背景重复方式
           可选：
             repeat: 默认值，背景图片沿着x、y轴平铺
             repeat-x:沿着x轴
             repeat-y：沿着y轴
             no-repeat：背景图片不重复   
        
      4、background-position:设置背景图片位置
            设置方式：
             - top left right bottom center 几个方位词设置
                   使用方位词，必须同时指定两个值，否则第二个默认center
             - 偏移量
                 通过指定偏移量指定图片位置
                 水平方向的偏移量 垂直方向的偏移量
                 background-position:10px 20px;           
 
    background-color:#bfa;
    background-image:url('...')；
    background-repeat:no-repeat;
    background-position:top left
}

</style>
<body>
<div class="box1">
   今天天气不错 hello hello 
</div>

</body>
</html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
.box1{
    width:500px;
    background-color:#bfa;
    background-image:url('...')；
    background-repeat:no-repeat;
   
    1、设置背景范围
       background-clip
          可选值：
             border-box 默认值 背景会出现在边框下边
             padding-box 背景不会出现在边框，只会出现在内容区和内边距
             content-box 背景只会出现在内容区
             
     2、background-origin 背景图片偏移量计算的原点
            可选值：
               padding-box:默认值  background-position 从内边距处开始计算
               content-box 背景图片偏移量从内容区处计算
               border-box  背景图片的偏移量从边框处开始计算
         
     3、background-size: 设置背景图片大小
             可选值：
               第一个值表示宽度
               第二个值表示高度    
                 如果只写一个，则第二个值是auto   
               
               cover   图片比例不变，将元素铺满
               contain 图片比例不变，将图片完整显示  
         
     4、background-attachment:背景图片是否跟随元素移动
           - 可选值
               scroll 默认值 背景图片回跟随元素移动
               fixed 背景图片固定在页面中，不会随元素移动  
        
     5、background: 背景所有属性的简写，所有背景相关的属性都可以通过该样式设置
           并且该样式没有顺序要求，也没有哪个属性必须写的
             注意：
               background-size 必须写在bacground-position的后边，
                 并且使用 / 隔开
                     background-position/background-size
               bakground-origin background-clip 两个样式，
               bakground-origin 要 在background-clip 前边
                                                                                                                                                                          
    background-origin: border-box  
    background-clip:content-box    
    border:10px red double
    background-size:100% auto
}

</style>
<body>
<div class="box1">
   今天天气不错 hello hello 
</div>

</body>
</html>

五仁卤鸡翅

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
36、背景

文章目录介绍背景介绍本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记背景<html lang="en"><head> <meta charset="UTF-8"> <title>meta</title></head><style>.box1{ width:500px; height:500px; 1、background-color:设置背景颜色
复制链接

扫一扫

专栏目录