距离上一次更新一年多了,但是垮掉了也要尝试着捡起来。今天糊弄一个图片背景,展示一下我自己画的好娇媚的封面
!因为只有星标和老看我文章的朋友才能看到我的完整封面,这种朋友应该是薛定谔的朋友,我觉得他不存在,但也不能笃定说他完全不存在,所以我决定用封面图做例子~
刚入学写网页的时候很喜欢用图片背景,因为在没有数据库大量数据做支撑的条件下,新写的页面非常空,看着很凄凉,随便搞个图片做背景就可以混淆视听,营造一种热闹氛围糊弄事儿,所以很值得学习一下。图片背景的应用:网页很少变化的图片(比如小图标)。
用一
张大图包含所有的小图标的
图叫做雪碧
图
,
它曾经
的优点是
减少网络
请求
次数,减小网络消耗,
很显然
雪碧图
现在
已经是时
代的眼泪了,有更简单更小消耗的方式取代了它,
不过
w3c
school还在用这个
,有兴趣的
朋友
可以去瞅瞅。
1. 把图片设置为背景background-image:url()
括号里填的是所选背景图片的路径
如果标签没有宽高,背景图片不能撑起元素大小,只由元素内容撑开。
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>
这里设置了一个宽900像素高383像素的框框,和所选背景图片的大小相同,效果如下
如果去掉对元素宽高的设置,仅有里面的内容撑开,效果如下
2. 在背景图比所选
元素大的时候,图片背景有点类似于相框,可视部分是相框框住的部分,我们可以通过background-position来改变看到的背景图片位置;
背景图比所选元素
小的时候,我们可以选择background-repeat来选择背景图片的平铺方式。
background-repeat
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;/*背景图显示左下*/}
更新结束!这次还搞了个很高端的动图!我可是太厉害了!下次更新希望能在下个礼拜吧!我也不知道能不能写出来,也不太知道该写啥,不过我翻了翻好像没写过如何插入样式表,也可能是写过但是题目里没提,要不下次写这个吧,就是似乎是没什么意思,概念就总是很无聊但是不知道还不行。原来写的东一榔头西一棒槌的没个顺序,我好被动哦