小白教程
所有教程
关于
Search
172.69.234.154
172.69.234.154
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“HTML背景图片”的源代码
本页内容
上一节:
HTML图形地图
下一节:
HTML_picture_标签
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
[[Category:HTML教程|20]] 几乎可以为任何 HTML 元素指定背景图像。 == HTML 元素上的背景图片 == 要在 HTML 元素上添加背景图像,请使用 HTML''' <nowiki>style</nowiki> '''属性和 CSS''' <nowiki>background-image</nowiki> '''属性: <sample title="" hererun="s" desc="Add a background image on a HTML element:" > <p style="background-image: url('/favicon.ico');"> 背景图片</p> </sample> 还可以在''' <nowiki><style></nowiki> ''' 中指定背景图像 <sample title="" hererun="s" desc="在''' <nowiki><style></nowiki> ''' 元素中指定背景图片:" > <style>p { background-image: url('/favicon.ico'); }</style> <p>背景图片</p> </sample> == 页面上的背景图 == 如果希望整个页面都有背景图片,则必须在''' <nowiki><body></nowiki> '''元素上指定背景图片: <sample title="" hererun="s" desc="为整个页面添加背景图片:" > <style>body { background-image: url('/favicon.ico'); }</style> <p>背景图片</p> </sample> ==背景重复== 如果背景图像小于元素,图像将在水平和垂直方向上重复,直到到达元素的末尾: <sample title="" hererun="s" desc="" > <style>body { background-image: url('/favicon.ico');}</style> <body width="100%" height="100%"> </body> </sample> 为避免背景图像重复出现,请将''' <nowiki>background-repeat</nowiki> '''属性设置为''' <nowiki>no-repeat</nowiki> '''. <sample title="" hererun="s" desc="" > <style>body { background-image: url('/favicon.ico'); background-repeat: no-repeat;}</style> <body width="100%" height="100%"> </body> </sample> ==背景封面== 如果希望背景图片覆盖整个元素,可以将''' <nowiki>background-size</nowiki> '''属性设置为 ''' <nowiki>cover.</nowiki> ''' 此外,为确保始终覆盖整个元素,请将 ''' <nowiki>background-attachment</nowiki> '''属性设置为''' <nowiki>fixed:</nowiki> ''' 这样,背景图像将覆盖整个元素,没有拉伸(图像将保持其原始比例): <sample title="" hererun="s" desc="" > <style>body { background-image: url('/favicon.ico'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }</style> <body width="100%" height="100%"> </body> </sample> == 背景拉伸 == 如果您希望背景图像拉伸以适合整个元素,您可以将''' <nowiki>background-size</nowiki> '''属性设置为 ''' <nowiki>100% 100%</nowiki> ''': 尝试调整浏览器窗口的大小,您会看到图像会拉伸,但始终会覆盖整个元素。 <sample title="" hererun="s" desc="" > <style>body { background-image: url('/favicon.ico'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; }</style> <body width="100%" height="100%"> </body> </sample>
返回至“
HTML背景图片
”。
上一节:
HTML图形地图
下一节:
HTML_picture_标签