HTML BODY 背景图片

内嵌:

background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/

background:url(背景图片路径)  no-repeat center;/*不重复背景图片中间显示*/

background:url(背景图片路径)  no-repeat bottom center;/*不重复背景图片底部中间显示*/

background:url(背景图片路径)  no-repeat right top;/*不重复背景图片右上方显示*/

background:url(背景图片路径)  no-repeat right bottom;/*不重复背景图片右下方显示*/

background:url(背景图片路径)  no-repeat left bottom;/*不重复背景图片左下方显示*/

background:url(背景图片路径)  #000 no-repeat;/*背景色上插入不重复背景图片*/

background:url(背景图片路径)  no-repeat 0px 0px;/*不重复背景图片定位第一个0px是指x轴也就是横向,第二个0px是指y轴也就是纵向*/

background:url(背景图片路径)  repeat-x;/*背景图片横向平铺*/

background:url(背景图片路径)  repeat-y;/*背景图片纵向平铺*/

background:url(背景图片路径)  repeat;/*背景图片满屏平铺*/

 

 

 

style/css:

 

body {
background-image: url(图片位置) repeat;
}

转载于:https://www.cnblogs.com/qunshu/p/3593049.html

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: el-card body背景图是在Element UI框架中的一个组件,用于给卡片的内容区域设置背景图。在使用el-card组件时,我们可以通过添加el-card__body类来指定卡片内容区域,然后利用CSS样式设置背景图。具体步骤如下: 1. 首先,在el-card组件中添加el-card__body类,例如:<el-card class="el-card__body">内容区域</el-card> 2. 在CSS文件中,使用background-image属性来设置背景图,例如:.el-card__body { background-image: url("背景图地址"); } 3. 在设置背景图的同时,我们也可以使用其他CSS属性来进一步调整背景图的样式,例如background-size来指定背景图的尺寸,background-position来控制背景图的位置等。 需要注意的是,背景图的路径可以是本地文件系统中的图片路径,也可以是网络上的图片链接地址。另外,建议在设置背景图时,考虑到页面加载速度和用户体验,尽量选择合适的图片大小和格式,以及优化背景图的加载方式,例如使用CSS精灵技术或者懒加载技术等。 总而言之,通过在el-card body中设置背景图,我们可以为卡片的内容区域增加一定的视觉效果和吸引力,提升用户体验。 ### 回答2: el-card body背景图是一种可以为el-card组件的内容区域设置背景图片的功能。el-card是饿了么前端团队开发的一款基于Vue.js的卡片组件,用于展示内容,而el-card的body部分是用来展示主要内容的区域。 使用el-card body背景图,可以通过设置CSS样式来为其添加背景图片。具体实现方法可以通过以下步骤: 1. 首先,在Vue组件中引入el-card组件,并设置需要展示的内容。 2. 在el-card标签内部添加一个div标签,用来作为el-card body的容器。 3. 在该div标签的style属性中添加背景图片的样式规则,例如: ```html <el-card> <div class="card-body" style="background-image: url('图片链接');"> <!-- 需要展示的内容 --> </div> </el-card> ``` 4. 根据实际需求,可以进一步设置背景图片的显示方式、大小、重复方式等样式。 通过以上步骤,就可以实现el-card body背景图的效果。可以根据自己的需求,选择合适的背景图片,让el-card组件的内容区域更加美观和吸引人。同时,也可以通过CSS样式的调整,实现更多个性化的背景效果,以满足不同的设计需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值