距离上一次更新一年多了，但是垮掉了也要尝试着捡起来。今天糊弄一个图片背景，展示一下我自己画的好娇媚的封面
！因为只有星标和老看我文章的朋友才能看到我的完整封面，这种朋友应该是薛定谔的朋友，我觉得他不存在，但也不能笃定说他完全不存在，所以我决定用封面图做例子~
background-position
举个栗子。参考代码如下
！因为只有星标和老看我文章的朋友才能看到我的完整封面，这种朋友应该是薛定谔的朋友，我觉得他不存在，但也不能笃定说他完全不存在，所以我决定用封面图做例子~
<html> <head> <meta charset="UTF-8"> <title>title> head> <body><div style="border: 5px solid dodgerblue; background-image: url(bg-2.png);width: 900px;height: 383px;">123div> body>html>
| repeat | 平铺背景(默认) |
| repeat-x | 在水平方向上平铺背景 |
| repeat-y | 在竖直方向上平铺背景 |
| no-repeat | 不平铺背景 |
| left top / left center / left bottom /right top / right center / right bottom /center top / center center / center bottom | 左上角是中心点，往右是x轴正方向，往下是y轴正方向 |
| x% y% 或 xpx ypx(px为长度单位，可被其他长度单位替换) | x轴:正数往右，负数往左；Y轴：正数往下，负数往上 |
<html> <head> <meta charset="UTF-8"> <title>title> <style type="text/css"> .a1{ width: 200px;height: 200px; } .a1:hover{ background-position: left bottom; }style> head> <body> <div class="a1" style="border: 5px solid dodgerblue; background-image: url(bg-2.png);">123div> body>html>这是一个简单的鼠标移入时图像位置改变的效果，大家可以自己搞一个试试，注意图片路径不要搞错了，图片要比设置的框大且不是纯色才能清楚看到效果。
完全看不懂代码的同学可以看看古早更新关于HTML文件的一丢丢和标签的id和class，我在这里简单说一下这个代码怎么写的：
—— 我给它命名为a1
style=" —— 这个叫内联样式，写在单个的HTML元素里的，优先级最高别的样式改不了它
border: 5px solid dodgerblue; —— 设置了他有一个5个像素大小、实线、怪怪蓝色边框
background-image: url(bg-2.png);"——图片背景使用了bg-2.png这张图片>
123 ——元素内容(一个div标签就是一个元素)
然后我在标签里设置这个叫a1的div标签的样式 ——这个叫内部样式
.a1{width: 200px;height: 200px;
/*设置元素宽200像素 高200像素*/}
.a1:hover/*鼠标移入*/{
background-position: left bottom;/*背景图显示左下*/}
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
