如何用CSS设置背景图片

我们经常会看一些如游戏、电影、购物网上那种五颜六色的网页画面,包括导航菜单,网页主题背景,红的,黑的,(如小简头,像框等)五颜六色的都有,那么我们如何在网页中设置背景图片呢?

列:设置元素背景属性

  • 01

    在<body> 标签里面添加一个<div>标签,文字内容为“商品列表”,并嵌入到CSS内部样式,代码如下图:

  • 02

    运行程序,结果如下:

  • 03

    设置<div>的宽度为150px,高度为40px,并为<div>增加背景颜色为红色,在工程文件下面创建一个名为image的文件夹,在其文件插入一张.gif的图片( url/image/1.gif),并设置边距上下为10px,左右为120px,不平铺(no-repeat),代码如下图

  • 04

    运行程序,结果如下:

  • 05

    设置字体颜色为白色(white),粗体;行高(line-height:40px)与<div>的高度一样;内边距:字体离边框15px;代码如下:

  • 06

    运行程序,结果如下:

(0)

相关推荐

  • css设置背景图片平铺方式

    css设置背景图片平铺方式 repeat:沿水平竖直两个方向平铺,这也是默认值 no-repeat:不平铺,即只显示一次 repeat-x:只沿水平方向平铺 repeat-y:只沿竖直方向平铺 操作方 ...

  • css设置背景图片大小

    网页的某些装饰可以通过背景图片来渲染,使得网页更加美观,CSS设置背景图片,不仅仅是大小,还有位置,放大方式,透明化之类.都是必备的CSS技能.层叠样式表(英文全称:Cascading Style S ...

  • css设置背景图片居中;css背景图片自动居中

    如何通过css设置一张背景图片自动水平垂直居中呢?可以通过css提供的background-position: center进行设置. 设置代码: .bg-img{ height: 100vh; wi ...

  • css设置背景不重复

    css设置背景图片,默认的样式是图片重复,有的时候页面只需要一个不重复的背景图片,这就需要使用到css背景图片重复属性 background-repeat: no-repeat;进行设置. 操作方法 ...

  • div 怎么设置背景图片

    这里小编主要用到CSS的一些属性,小编做前端时也是经常用到设置背景图片的问题,那么小编说一些自己常用的方法 操作方法 01 首先创建一个html文件一个css样式表文件,如图 02 在html文件中创 ...

  • word2013怎样设置背景图片?

    word2013怎样设置背景图片呢?在使用word2013时,我们希望是文字搭配图片一起显示,这要怎么设置呢?下文小编就教大家word2013插入背景图片的方法,还不会的朋友可以来下文了解下哦~ wo ...

  • ppt怎么在母版里设置背景图片

    ppt母版里设置背景图片的步骤: 1.点视图菜单--幻灯片母版: 2.点背景样式--设置背景格式: 3.点图片或纹理填充,点文件按钮,选择背景图片,点打开: 4.返回到设置背景格式窗口,点全部应用,点 ...

  • word怎么设置背景图片

    word怎么设置背景图片 打开word,依次点插入-图片-来自文件. 在本机上选一幅图片作为背景,然后点插入 双击图片,打开"设置图片格式"对话框. 选择"版式" ...

  • QQ空间怎么设置背景图片

    QQ空间设置背景图片的方法 首先,登陆我们自己的QQ空间之后,点击"装扮",然后就可以进入QQ空间的装扮设置了. 在空间装扮的相关设置中,我们点击"DIY装扮" ...