CSS background背景

作者: 微语博客 | 来源:发表于2021-06-21 23:10 被阅读0次

CSS背景属性

CSS背景属性用于设置HTML元素的背景(填充),复合属性 background 可以用来设置背景颜色,图片,定位,大小,重复等属性,设置某一项属性时我们单独设置;

CSS常用的属性:

  • background-color:设置背景颜色,值为CSS颜色。
  • background-image:设置背景图片,值为图片的url。
  • background-repeat:设置背景图片是否重复排列,常用值no-repeat不重复。
  • background-attachment:背景图像是否固定或者随着页面的其余部分滚动。
  • background-position:背景图像的定位(起始位置)。

复合属性background

background复合属性用于设置上面常用的五个属性,background-color,background-image,background-repeat,background-attachment,background-position。值为依次五个属性,但无需全部使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:200px;
            background: url('img/bg.jpeg') no-repeat fixed center;
            /*背景属性设置了一张背景图片 不重复 固定图像 居中排列*/
        }
    </style>
</head>
<body>
    <div>Hello World!</div>
        
</body>
</html>

背景属性

以下为各添加CSS版本的背景属性

属性 描述 CSS
background 复合属性,设置对象的背景特性。 1
background-attachment 设置或检索背景图像是随对象内容滚动还是固定的,必须先指定background-image属性。 1
background-color 设置或检索对象的背景颜色。 1
background-image 设置或检索对象的背景图像。 1
background-position 设置或检索对象的背景图像位置,必须先指定background-image属性。 1
background-repeat 设置或检索对象的背景图像如何铺排填充,必须先指定background-image属性。 1
background-clip 指定对象的背景图像向外裁剪的区域。 3
background-origin 设置或检索对象的背景图像计算background-position时的参考原点(位置)。 3
background-size 检索或设置对象的背景图像的尺寸大小。 3

部分属性在IE浏览器中需要兼容,而且在主流浏览器中也会有显示差异。

相关文章

  • css-背景设置

    css-背景设置 背景设置 background: background-color: 背景颜色设置 ba...

  • css4

    CSS 背景 背景色 p {background-color: gray;} 背景图像 background-im...

  • Html-CSS 背景设置

    CSS 背景 CSS 背景属性用于定义HTML元素的背景。CSS 属性定义背景效果: background-col...

  • CSS background背景

    CSS背景属性 CSS背景属性用于设置HTML元素的背景(填充),复合属性 background 可以用来设置背景...

  • Tailwind Background

    背景滚动(background attachment) CSS提供的background-attachment属性...

  • CSS3 背景

    CSS3 背景 CSS3 background-origin 属性 background-origin 属性规定背...

  • CSS背景

    CSS背景 3D背景模型 属性 background-color background-image backgro...

  • 第十五天

    1、Css设置背景 background-image设置元素的背景图像。 background-position:...

  • css属性之 background-size origin po

    css 背景background-size origin position background-size在no-...

  • CSS背景图

    css背景图 涉及的css属性 background-image background-repeat 默认情况下,...

网友评论

    本文标题:CSS background背景

    本文链接:https://www.haomeiwen.com/subject/jbguyltx.html