CSS 图片

2025年3月26日 | 阅读 2 分钟

图片是任何 Web 应用程序的重要组成部分。通常不建议在 Web 应用程序中包含大量图片，但在需要时使用图片也很重要。CSS 有助于我们控制 Web 应用程序中图片的显示。

CSS 中图片的样式设置与使用边框和边距来设置元素的样式非常相似。有多种 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>Thumbnail Image</h1>
<img src="jtp.png"></img>
<h2>Welcome to javaTpoint</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>Transparent Image</h1>
<img src="jtp.png"></img>
<h2>Welcome to javaTpoint</h2>
</body>
</html>

圆角图片

**border-radius** 属性设置了带边框图片的半径。它用于创建圆角图片。圆角的可能值如下：

border-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>Rounded Image</h1>
<img src="jtp.png" id="img1"></img>
<h2>Welcome to javaTpoint</h2>

 <h1>Circle Image</h1>
<img src="jtp.png" id="img2"></img>
<h2>Welcome to javaTpoint</h2>
</body> 
</html>

响应式图片

它会自动调整以适应屏幕尺寸。它用于自动将图片调整到指定框内。

示例

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
#img1{
max-width:100%;
height:auto;
}
h2{
color:red;
}
    </style> 
</head> 
  
<body>
 <h1>Responsive image</h1>
 <h2>You can resize the browser to see the effect</h2>
<img src="jtp.png" id="img1" width="1000" height="300"></img>
<h2>Welcome to javaTpoint</h2>
</body> 
</html>

居中图片

我们可以使用 **left-margin** 和 **right-margin** 属性来居中图片。我们必须将这些属性设置为 **auto** 才能使其成为块级元素。

示例

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
#img1{
margin-left:auto;
margin-right:auto;
display:block;
}
h1,h2{
text-align:center;
}
    </style> 
</head> 
  
<body>
 <h1>Center image</h1>
<img src="jtp.png" id="img1"></img>
<h2>Welcome to javaTpoint</h2>
</body> 
</html>

下一个主题CSS Overflow

CSS 图片

缩略图

透明图片

圆角图片

响应式图片

居中图片

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS 图片

缩略图

透明图片

圆角图片

响应式图片

居中图片

相关帖子

CSS justify-content

CSS left property

CSS Float

CSS Radio Button

page-break-before 属性

CSS Position

CSS background-origin

CSS background-blend-mode

CSS Margin

CSS quotes

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器