博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
图解 CSS (4): background - 背景
阅读量:7011 次
发布时间:2019-06-28

本文共 957 字,大约阅读时间需要 3 分钟。

  hot3.png

backgroundbackground-colorbackground-attachmentbackground-imagebackground-positionbackground-position-xbackground-position-ybackground-repeat
设置背景色(譬如红色): background-color: red; 或者 background: red;
26153413_1W9d.png

背景图片: background-image: url(路径); 或者 background: url(路径);
其中的路径可以是相对或绝对路径, 可以带双引号或单引号.
26153413_wCOK.png

background-repeat(背景图片反复方式): repeat(默认)、no-repeat、repeat-x、repeat-y.
26153413_JLjx.png
26153413_beTr.png
26153413_n0rJ.png
26153413_aYD6.png

background-position(背景图起始位置):
上中: top 或者 top center上左: top left(默认)上右: top right中心: center 或者 center center中左: left 或者 center left中右: right 或者center right下中: bottom 或者 bottom center下左: bottom left下右: bottom right还可以用百分比或具体的数值描述: x% y% 或 xpos ypos
26153413_uwSS.png
26153413_vm3t.png
26153413_BYaw.png
26153413_tNLO.png
26153413_ehLV.png
26153413_5W5z.png
26153413_QZNx.png
26153413_I1Ym.png
26153413_7u8M.png
26153413_GKQa.png
26153414_sREm.png

background-position 本来就是有 x、y 两个值构成的, 也可用
background-position-x 和 background-position-y 单独设定.
background-attachment(设置背景是否随滚动条滚动): scroll(默认)、fixed(不滚动).
26153414_YmJs.gif

用 background 可以同时设置:
background-color、background-attachment、background-image、background-position、background-repeat
竟没有顺序的要求, 也可随意省略, 只是 position 用两个值时不要分开即可.
26153414_QFNy.png

转载于:https://my.oschina.net/hermer/blog/319900

你可能感兴趣的文章
springboot oauth 鉴权之——授权码authorization_code鉴权
查看>>
〔池化纲领〕也及链表
查看>>
黑马程序员-蓝桥杯110问题练习
查看>>
AtCoder Beginner Contest 127 解题报告
查看>>
最大流EK算法
查看>>
在nuxt中引入Font Awesome字体图标库
查看>>
sql trace script
查看>>
程序员,请不要抢系统管理员的饭碗
查看>>
VCS双机由于ID冲突导致启动失败
查看>>
Windows 8上安装本地回环网卡
查看>>
修改计算机名的注意事项
查看>>
PowerBI从Exchange跟踪日志中分析数据和KPI展现
查看>>
你能成为什么样的人,取决于你心中的那颗种子!
查看>>
接口自动化测试系列之PHPUnit介绍和环境搭建
查看>>
通过ssl调用远程WebService
查看>>
SQL Server 何时将“脏页”回写到硬盘
查看>>
笔记本电脑的选购之一(2011年10月)
查看>>
电子商务时代必知的PKI及HTTPS
查看>>
程序员教你如何追女生
查看>>
各种测试用例简要模板
查看>>