CSS background 所有属性详细说明

background组合使用

<div style="
width: 100px;
height: 100px;
/* 顺序为 background-color background-image background-repeat background-attachment background-position */
background: #00ff00 url('smiley.gif') no-repeat fixed center; 
"></div>

background常用属性

属性描述说明
background-color设置元素的背景色。
color-name颜色的因为名
color-rgbrga | rgba
color-hex十六进制
transparent透明色
background-image设置背景图像。

url(URL)

png|gif|jpeg 等图片格式

linear-gradient

背景渐变

none不设置背景图片
background-repeat设置背景图像是否及如何重复。repeat水平、垂直重复
repeat-x水平重复
repeat-y垂直重复
no-repeat不重复
space背景图片对称均匀分布
background-attachment背景图像是否固定或者随着页面的其余部分滚动。scroll背景滚动
fixed背景固定
background-position设置背景图像的起始位置。left左对齐
right右对齐
center居中对齐
top顶端对齐
bottom底部对齐
水平居中方式 垂直居中方式设置水平垂直居中方式
x% y%自己设置位置
background-size背景的尺寸cover背景完全覆盖,可能会有背景溢出
contain图片不溢出的放在容器中,可能会漏出部分区域

background-clip

图片裁剪border-box包括边框
padding-box不包括边框,包括内边距
center-box内容区域
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值