CSS image
CSS image
image是任何Web应用程序的重要组成部分。通常不建议在Web站点中包含很多图像，但是在需要的地方使用它们很重要。 CSS帮助我们控制Web应用程序中图像的显示。
CSS中image的样式类似于使用边框和边距的元素样式。有多种CSS属性，例如
border属性，
height属性，
width属性等，可以帮助我们为图像设置样式。
border属性，
height属性，
width属性等，可以帮助我们为图像设置样式。
让我们通过一些插图来讨论CSS中图像的样式。
缩略图图像
border属性用于制作缩略图。
示例
<!DOCTYPE html>
<html>
<head>
<style>
img{
border: 2px solid red;
border-radius:5px;
padding:10px;
}
h2{
color:red;
}
</style>
</head>
<body>
<h1>缩略图</h1>
<img src="../uploads/html/rose.jpg"></img>
<h2>Welcome to lidihuo</h2>
</body>
</html>
透明图像
要使图像透明，我们必须使用
opacity 属性。此属性的值分别在0.0到1.0之间。
opacity 属性。此属性的值分别在0.0到1.0之间。
示例
<!DOCTYPE html>
<html>
<head>
<style>
img{
border: 2px solid red;
border-radius:5px;
padding:10px;
opacity:0.3;
}
h2{
color:red;
}
</style>
</head>
<body>
<h1>透明图像</h1>
<img src="../uploads/html/rose.jpg"></img>
<h2>Welcome to lidihuo</h2>
</body>
</html>
圆角图像
border-radius：属性设置边框图像的半径。它用于创建四舍五入的图像。圆角的可能值如下：
border-top-right-radius：它设置所有四个border-radius属性。
border-top-right-radius：设置右上角的边框。
border-top-left-radius：它设置左上角的边框。
border-bottom-right-radius：它设置右下角的边框。
border-bottom-left-radius：它设置左下角的边框。
示例
<!DOCTYPE html>
<html>
<head>
<style>
#img1{
border: 2px solid green;
border-radius:10px;
padding:5px;
}
#img2{
border: 2px solid green;
border-radius:50%;
padding:5px;
}
h2{
color:red;
}
</style>
</head>
<body>
<h1>圆角图像</h1>
<img src="../uploads/html/rose.jpg" id="img1"></img>
<h2>Welcome to lidihuo</h2>
<h1>Circle Image</h1>
<img src="../uploads/html/rose.jpg" id="img2"></img>
<h2>Welcome to lidihuo</h2>
</body>
</html>
自适应图像
它会自动调整以适合屏幕尺寸。用于自动将图像调整到指定的框。
示例
<!DOCTYPE html>
<html>
<head>
<style>
#img1{
max-width:100%;
height:auto;
}
h2{
color:red;
}
</style>
</head>
<body>
<h1>自适应图像</h1>
<h2>您可以调整浏览器大小以查看效果</h2>
<img src="../uploads/html/rose.jpg" id="img1" width="1000" height="300"></img>
<h2>Welcome to lidihuo</h2>
</body>
</html>
使图像居中
我们可以使用
左边缘和
右边缘属性来使图像居中。为了制作块元素，我们必须将这些属性设置为
auto 。
左边缘和
右边缘属性来使图像居中。为了制作块元素，我们必须将这些属性设置为
auto 。
示例
<!DOCTYPE html>
<html>
<head>
<style>
#img1{
margin-left:auto;
margin-right:auto;
display:block;
}
h1,h2{
text-align:center;
}
</style>
</head>
<body>
<h1>使图像居中</h1>
<img src="../uploads/html/rose.jpg" id="img1"></img>
<h2>Welcome to lidihuo</h2>
</body>
</html>