图片样式
图片大小
最基本的应该就是对大小的管理
width:像素值; 宽度
height:像素值; 高度
<!DOCTYPE html>
<html>
<head>
<title>这是一个标题</title>
<meta charset="utf-8"/>
<style>
img
{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<img src="小猫.jpg">
</body>
</html>
图片边框
一样使用border
进行定义
<!DOCTYPE html>
<html>
<head>
<title>这是一个标题</title>
<meta charset="utf-8"/>
<style>
img
{
width: 300px;
height: 300px;
border: 5px blue solid;
}
</style>
</head>
<body>
<img src="小猫.jpg">
</body>
</html>
效果:
图片对齐
图片对齐和文本的对齐是一样的,也是用 text-align
进行,但需要注意不能直接在 img
定义,需要在父元素处定义
属性依然是:
left 左对齐
center 居中
right 右对齐
<!DOCTYPE html>
<html>
<head>
<title>这是一个标题</title>
<meta charset="utf-8"/>
<style>
img
{
width: 30px;
height: 30px;
border: 5px blue solid;
/*放在这里是不生效的*/
text-align: right;
}
/*需要单独定义,在父元素中才能生效*/
.myimg {text-align: center;}
</style>
</head>
<body>
<div class="myimg">
<img src="小猫.jpg">
</div>
<img src="小猫.jpg">
</body>
</html>
效果:
垂直对齐
用法:vertical-align:取值;
属性:
top 顶部对齐
middle 中部对齐
baseline 基线对齐
bottom 底部对齐
例子:
<!DOCTYPE html>
<html>
<head>
<title>这是一个标题</title>
<meta charset="utf-8"/>
<style>
img
{
width: 30px;
height: 30px;
border: 5px blue solid;
}
#a{vertical-align: top;}
#b{vertical-align: middle;}
#c{vertical-align: bottom;}
#d{vertical-align: baseline;}
</style>
</head>
<body>
<img id="a" src="小猫.jpg">
<img id="b" src="小猫.jpg">
<img id="c" src="小猫.jpg">
<img id="d" src="小猫.jpg">
</body>
</html>
效果:
emm~~~貌似看起来就是这样,暂时想不到这个实际运用起来的时候的作用
文字环绕 float
属性:
left 元素向左浮动
right 元素向右浮动
例子:
<!DOCTYPE html>
<html>
<head>
<title>这是一个标题</title>
<meta charset="utf-8"/>
<style>
img
{
width: 30px;
height: 30px;
border: 5px blue solid;
/*float: left;*/
}
</style>
</head>
<body>
<img id="a" src="小猫.jpg">
<p>怎么算是文字环绕型</p>
</body>
</html>
这时候,网页效果是:
当设定了文字环绕后
<!DOCTYPE html>
<html>
<head>
<title>这是一个标题</title>
<meta charset="utf-8"/>
<style>
img
{
width: 30px;
height: 30px;
border: 5px blue solid;
float: left;
}
</style>
</head>
<body>
<img id="a" src="小猫.jpg">
<p>怎么算是文字环绕型</p>
</body>
</html>
效果:
emm~~~~~~
那我这样写可以吗?
<!DOCTYPE html>
<html>
<head>
<title>这是一个标题</title>
<meta charset="utf-8"/>
<style>
img
{
width: 30px;
height: 30px;
border: 5px blue solid;
}
</style>
</head>
<body>
<p>这算是手动的<img id="a" src="小猫.jpg">文字环绕型吗?</p>
<p>怎么算是文字环绕型</p>
</body>
</html>
效果:
貌似也可以,强行把它夹在文字中间…
背景样式
属性:
background-image: url(); 图片背景
background-color: 颜色; 颜色背景
background-repeat: 属性; 背景图片如何重复铺陈
background-position: 值; 定义背景图片位置
background-attachment: fixed; 固定背景图片,使其不动
背景图片:
用法的话,放到div
或父类内
值得注意的是,它不是直接把图片全显示在网页上,而是你网页有多大,他就铺多少,见下列代码和效果#a{background-image: url(小猫.jpg);}
<!DOCTYPE html>
<html>
<head>
<title>这是一个标题</title>
<meta charset="utf-8"/>
<style>
#a{background-image: url(小猫.jpg);}
</style>
</head>
<body>
<div id="a">
<p>这是一句没有营养的话</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</body>
</html>
效果:
背景颜色:
<!DOCTYPE html>
<html>
<head>
<title>这是一个标题</title>
<meta charset="utf-8"/>
<style>
#a{background-color: aqua;}
</style>
</head>
<body>
<div id="a">
<p>这是一句没有营养的话</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</body>
</html>
效果:
背景图片重复
属性:
repeat 在水平方向和垂直方向上同时平铺(默认值)
repeat-x 只在水平方向上平铺
repeat-y 只在垂直方向上平铺
no-repeat 不平铺
如下例子:
定义了div
的格式,背景图片
然后定义父类平铺
<!DOCTYPE html>
<html>
<head>
<title>这是一个标题</title>
<meta charset="utf-8"/>
<style>
div
{
background-image: url(x.gif);
}
#a{background-repeat: repeat;}
</style>
</head>
<body>
<div id="a">
<p>这是一句没有营养的话</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</body>
</html>
效果:
背景图片位置
用法:background-position: 水平距离像素 垂直距离像素;
这里的距离指到网页左边界和上边界的距离
也可以用关键字,对应关系如下
其实就是几个关键字组合来定义位置,上下左右中
top 上
center 中
right 右
bottom 下
left 左
用的时候,关键字可以两两组合
如 right bottom 就代表右下
<!DOCTYPE html>
<html>
<head>
<title>这是一个标题</title>
<meta charset="utf-8"/>
<style>
div
{
width: 100px;
height: 100px;
background-position: 50px 50px;
background-image: url(x.gif);
background-repeat: no-repeat;
}
/* #a{background-repeat: no-repeat;} */
</style>
</head>
<body>
<div id="a">
<p>这是一句没有营养的话</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</body>
</html>
效果:
文章来源:https://www.toymoban.com/news/detail-802225.html
背景图片固定
用法:background-attachment: fixed;
这样就是让背景图片固定在一处,网页滚动不随着变化,一般应该用不到background-attachment: scroll;
随元素滚动,这个是默认的,所以这个应该基本用不到文章来源地址https://www.toymoban.com/news/detail-802225.html
到了这里,关于HTML--CSS--图片和背景样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!