CSS 元素添加背景图像的方法background-image,实例在线编辑

元素背景图像属性

CSS中为某一个元素添加背景图像,可以通过为元素添加background-image属性。在默认的情况下,即不添加其它的属性值的情况下,被添加的图像会不断重复,并覆盖整个元素(如果元素的宽度和高度足够大的话)。添加background-image属性的语法如下:

E{background-image:url("filepath")}

提示:语法中E为选择器以选择需要添加背景图像的元素,filepath为图像的路径,可以是相对路径,相对当前的文件的文件路径。


元素添加背景图像实例代码,及在线编辑器

<div id='e1'></div>
<style>
  #e1{width:100%;height:100%;background-image:url("../../static/img/bmi.jpg")}
</style>

关于背景图像和文字的搭配使用

从广告平面设计的角度来讲,图像和文字应该尽量分开,最好不要把文字设计在图像上,让图像是图像,文案是文案,不必为目标受众带来不必要的阅读干扰。



全栈前端 / CSS教程 :



























Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.