案例-背景图片的使用（background）

1、实现案例：小图片

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例</title><style>a {display: block;/* background-color: pink; */width: 145px;height: 50px;text-decoration: none;color: rgb(145, 145, 145);/* 文字水平居中 */line-height: 50px;text-indent: 1.5em;/* 使用背景来加入图片，并利用定位属性调整位置 */background-image: url(./title_sprite.png);background-repeat: no-repeat;background-position: left center;}a:hover {color: crimson;}</style>
</head><body><a href="#">成长守护平台</a>
</body></html>

2、实现案例：大图片

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>exercise</title><style>body {background-image: url(./images/big_image.jpg);background-repeat: no-repeat;background-position: center top;}</style>
</head><body></body></html>

无论浏览器body大小，背景图像会始终保持居中：

案例-背景图片的使用（background）相关推荐

table vue 背景图片_table中background背景图片自动拉伸
解决android:background背景图片被拉伸问题 ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而s ...
ueditor编辑器抓取页面背景图片background-image或background
ueditor.all.js文件里找到catchremoteimage,修改如下几部分代码(可以跟未修改之前对比一下): UE.plugins['catchremoteimage'] = functi ...
html背景图片横屏,CSS背景颜色背景图片居中重复固定样式background经验篇
我们使用CSS Background样式属性,可以设置网页背景单一颜色.网页背景为图片.网页背景图片居中于网页.网页背景图片网页固定位置.网页背景图片中网页中重复平铺等css背景样式介绍与案例讲解. ...
background图片叠加_CSS 背景图片重叠铺满整个层
background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示 ...
设置JFrame背景图片
这里我就放上改写的代码吧,不做多的解释,推荐一个好的博文 https://blog.csdn.net/jdsjlzx/article/details/16831815 1 public void in ...
用js操作table、tr、td 「字体样式及TD背景图片」
function messageSort() { --函数名 var message=document.getElementById("message").value; --添加 ...
java窗体添加背景图片_Java项目实战之实战之天天酷跑（四）：游戏主界面
接上文,本文将实现游戏主界面,功能如下: 移动的背景图片.动态的玩家.玩家的移动功能.五种障碍物持续出现.玩家和障碍物的碰撞.暂停.继续功能. 首先,看一下整体效果: 动图实在太大,几秒钟的 Gif ...
【HTML】铺满背景图片
HTML-铺满背景图片示例: background: url("http://q1.qlogo.cn/g?b=qq&nk=2065843899&s=5") no- ...
背景图片和颜色混合叠加多种混合模式
//同时设置背景图片和颜色 background: #5bd5a0 url("xxxx.jpg"); //背景混合模式 background-blend-mode: Luminos ...

案例-背景图片的使用（background）

案例-背景图片的使用（background）相关推荐

最新文章

热门文章