很多站长朋友们都不太清楚html怎么设置图片样式，今天小编就来给大家整理html怎么设置图片样式，希望对各位有所帮助，具体内容如下：
本文目录一览： 1、 如何在html中设置背景图片 2、 html网页制作中如何设置背景图片（如何引用） 3、 html中如何加入背景图片 如何在html中设置背景图片1、设置背景图片只需在css样式中设置backgroud-image属性：
<style type="text/css" >
body{
background-image:url(你的图片地址);
background-position:center;
background-repeat:repeat-y；
}
</style>
2、其中， background-image:url(你的图片地址)表示背景图片的存放路径；
background-position:表示的是背景图片的位置，主要有top(上)、bottom（下）、left(左)、right(右)这四个取值；
background-repeat:表示的图片的平铺方式。默认情况是平铺，一般设置为no-repeat,表示的是不平铺。
背景颜色属性(background-color)：
这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性。
body {background-color:#99FF00;}：
上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。
演示示例
背景图片属性(background-image)：
这个属性为HTML元素设定背景图片，相当于HTML中background属性。
<body style="background-image:url(images/css_tutorials/background.jpg)">
上面的代码为Body这个HTML元素设定了一个背景图片。
演示示例
背景重复属性(background-repeat)：
这个属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既横向重复，又竖向重复。
repeat-x 背景图片横向重复；
repeat-y 背景图片竖向重复；
no-repeat 背景图片不重复；
body {background-image:url(images/css_tutorials/background.jpg); background-repeat:repeat-y}
上面的代码表示图片竖向重复。
演示示例
背景附着属性(background-attachment)：
这个属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。这个属性有两个值，一个是scroll，一个是fixed。缺省值是scroll。
body {background-image:url(images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed}
上面的代码表示图片固定不动，不随内容滚动而动。
演示示例
背景位置属性(background-position):
这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。
body {background-image:url(images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px}
上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面60px。
演示示例
背景属性(background):
这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, background-image, background-repeat, backgroundattachment, background-position。
body {background:#99FF00 url(images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}
上面的代码表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。
html网页制作中如何设置背景图片（如何引用）1、首先打开Atom编辑器导入项目文件夹，先创建一个index.html的文件。定义一下html文件的主信息：
2、然后填写自己的网页内容， 设置一下样式，直接在body后面加上background="图片名字"即可插入图片：
3、最后来到浏览器，刷新一下网页，这样就会显示背景了：
html中如何加入背景图片在html中某个div里加入背景图片的话，主要有以下几种方式：
第一种： 在css文件里加入背景图片：在css里用url(images/背景图2.jpg)，在内联css和引入css中会由于html文件和css文件所处的相对位置不同，引入图片路径会有所不同。
如图：
第二种：在html中引入：<div class="detail" style="background-image: url(/data/upload/help/202211/19/747f9dc7f64e8553f5feaa1e5d081846.jpg)"></div>，同理url()括号里是图片的引入路径。
如图：
第三种：在div中加一张图片
<div class="detail" >
<img src="/data/upload/help/202211/19/747f9dc7f64e8553f5feaa1e5d081846.jpg" alt="" style="width:100%;height:100%">
</div>
如图：
当图片小于背景区域大小时，图片会不断重复显示，如果不想图片重复显示，可以设置background-repeat，background-repeat有4个值，分别是repeat（代表重复显示）、no（代表不重复）、repeat-x（代表水平方向上重复）、repeat-y（代表垂直方向上重复）
当图片小于背景区域大小时，默认从左上角开始铺，如果想从任意位置开始铺，可以使用background-position属性，设置在x、y方向的偏移量。
当图片大于背景区域时，只显示图片左上角。
当图片和背景区域大小一样大时，显示整张图片。
关于html怎么设置图片样式的介绍到此就结束了，不知道本篇文章是否对您有帮助呢？如果你还想了解更多此类信息，记得收藏关注本站，我们会不定期更新哦。
查看更多关于包含html怎么设置图片样式的词条的详细内容...