CSS列表属性与背景属性

屏幕截图 2022-09-19 093321

列表属性 复合写法list-style

定义列表符合样式list-style-type

list-style-type:disc(实心圆 默认)/circle(空心圆)/square(实心方块)/none(去掉符号)

list-style-image将图片设置为列表符合样式

list-style-image:url();

使用url引入图片

list-style-position设置列表项标记的放置位置

list-style-position:outside;列表的外面(默认值)

list-style-position:inside;列表的里面

list-style复合写法(简写)

list-style:none;去除列表符号

复合写法,写到ul标签里class list-style 使用空格隔开,顺序可以随便

背景属性 复合写法background

背景颜色background-color

background-color:red;

  • 三种写法1.直接写颜色 2.rgb 3.16进制#写法
  • rgba写法 “a”代表透明度 rgba:(255,0,0,0.5);

背景图片background-images

background-images:url();

  • 默认为平铺效果

背景图片的平铺background-repeat

background-repeat:no-repeat/repeat/repeat-x/repeat-y;

  • repeat默认平铺 repeat-xX轴平铺 repeat-yY轴平铺 no-repeat不平铺

背景图片的定位background-position

background-position:水平位置 垂直位置;可以给负值

  • 写一个具体的值距离左上多少px/%/英文单词如下(支持负值)
  • 英文单词:left左 right右 top上 bottom下 随意组合

background-size自适应比例

  • 占满整个盒子,会导致图片变形
  • 取值如100px 100px(数字)或100% 100%(百分比)
  • cover包含 等比例缩放,把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。也许无法显示在背景定位区域中,等比例缩放不失针。
  • contain覆盖 把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。铺不满盒子,留白。

背景图片的固定background-attachment

background-attachment:scroll(滚动)/fixed()

scroll默认值,fixed固定在浏览器的左上角

不在盒子的显示范围则不显示

复合写法background(简写)

  1. 用空格隔开
  2. 顺序可以换 (位置除外)
  3. 可以取一个值,放在后面能覆盖前面的值
  4. background-size属性只能单独使用 无法使用符合写法
  5. 如使用复合写法则非复合写法无法使用
© 版权声明
THE END
文章不错?点个赞呗~
神马?你要分享给你的好朋友?太感谢你啦~
分享