CSS image

CSS image

image是任何Web应用程序的重要组成部分。通常不建议在Web站点中包含很多图像,但是在需要的地方使用它们很重要。 CSS帮助我们控制Web应用程序中图像的显示。
CSS中image的样式类似于使用边框和边距的元素样式。有多种CSS属性,例如
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之间。
示例
  <!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
示例
 <!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>