css如何使div背景图片填充

html-css021

css如何使div背景图片填充,第1张

css使div背景图片填充的具体操作步骤如下:

1、我们首先打开前端开发工具,新建一个html代码页面。

2、在html代码页面上创建一个用于设置背景颜色的div标签,然后给这个标签添加上class = "bg-img"。

3、设置背景图片,创建style标签,然后在标签里面对类为bg-img设置背景图片、图片不重复、宽、高的样式。

4、保存html代码,使用浏览器打开,这个时候会发现浏览器上的背景图片显示在左上角。

5、回到html代码页面,在bg-img类里添加background-position: center的属性。

6、保存html代码后重新刷新浏览器,这个时候会发现浏览器上的背景图片已经自动居中了。

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:body {background: url(image.jpg) no-repeatbackground-size: 100%}。

3、浏览器运行index.html页面,此时成功设定背景图片等比例放缩到网页宽度。

01

打开软件

可以使用Dreamweaver或Visual studio软件,比如打开VS软件,如下图所示:

02

创建一个DIV

然后在body主体中创建一个div名为【a】, <div class="a">DIV</div>,如下图所示:

03

设置属性

然后设置div的属性,比如高度、宽度和颜色等等,如下图所示:

04

背景渐变色

然后设置背景渐变色,代码如下图:

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff))

其中:linear-gradient()是用来创建线性渐变的语句。

05

预览效果

点击预览图标,在浏览器中的显示效果图如下所示: