1. 云图网首页
  2. 技术专区
  3. 编程笔记

CSS 图片详解编程语言

• 编程笔记

CSS 图片

一、圆角图片

img { 
    border-radius: 8px; 
}

二、缩略图

 border 属性来创建缩略图。

img { 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    padding: 5px; 
} 
 
<img src="paris.jpg" alt="Paris">

三、响应式图片

响应式图片会自动适配各种尺寸的屏幕。

如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：

img { 
    max-width: 100%; 
    height: auto; 
}

四、图片文本

（1）左上角：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
.container { 
    position: relative; 
} 
.topleft { 
    position: absolute; 
    top: 8px; 
    left: 16px; 
    font-size: 18px; 
} 
 
img {  
    width: 100%; 
    height: auto; 
    opacity: 0.3; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
  <img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300"> 
  <div class="topleft">左上角</div> 
</div> 
</body> 
</html>

效果：

CSS 图片详解编程语言

（2）右上角：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8">  
<style> 
.container { 
    position: relative; 
} 
.topright { 
    position: absolute; 
    top: 8px; 
    right: 16px; 
    font-size: 18px; 
} 
img {  
    width: 100%; 
    height: auto; 
    opacity: 0.3; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
  <img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300"> 
  <div class="topright">右上角</div> 
</div> 
</body> 
</html>

效果：

CSS 图片详解编程语言

（3）左下角：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8">  
<style> 
.container { 
    position: relative; 
} 
.bottomleft { 
    position: absolute; 
    bottom: 8px; 
    left: 16px; 
    font-size: 18px; 
} 
img {  
    width: 100%; 
    height: auto; 
    opacity: 0.3; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
  <img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300"> 
  <div class="bottomleft">左下角</div> 
</div> 
</body> 
</html>

效果：

CSS 图片详解编程语言

（4）右下角：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8">  
<style> 
.container { 
    position: relative; 
} 
.bottomright { 
    position: absolute; 
    bottom: 8px; 
    right: 16px; 
    font-size: 18px; 
} 
img {  
    width: 100%; 
    height: auto; 
    opacity: 0.3; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
  <img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300"> 
  <div class="bottomright">右下角</div> 
</div> 
</body> 
</html>

效果：

CSS 图片详解编程语言

（5）居中：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8">  
<style> 
.container { 
    position: relative; 
} 
.center { 
    position: absolute; 
    left: 0; 
    top: 50%; 
    width: 100%; 
    text-align: center; 
    font-size: 18px; 
    margin-top:-9px; 
} 
img {  
    width: 100%; 
    height: auto; 
    opacity: 0.3; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
  <img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300"> 
  <div class="center">居中</div> 
</div> 
</body> 
</html>

效果：

CSS 图片详解编程语言

五、卡片式图片

div.polaroid { 
    width: 80%; 
    background-color: white; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
} 
 
img {width: 100%} 
 
div.container { 
    text-align: center; 
    padding: 10px 20px; 
}

效果：

CSS 图片详解编程语言

六、图片滤镜

CSS filter 属性用为元素添加可视效果 (例如：模糊与饱和度) 。

注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。

/*修改所有图片的颜色为黑白 (100% 灰度)*/ 
img { 
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ 
    filter: grayscale(100%); 
}

注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。

CSS 图片详解编程语言

七、响应式图片相册

.responsive { 
    padding: 0 6px; 
    float: left; 
    width: 24.99999%; 
} 
 
@media only screen and (max-width: 700px){ 
    .responsive { 
        width: 49.99999%; 
        margin: 6px 0; 
    } 
} 
 
@media only screen and (max-width: 500px){ 
    .responsive { 
        width: 100%; 
    } 
}

效果：

CSS 图片详解编程语言

八、图片 Modal(模态)

本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。

首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。

然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：

// 获取模态窗口 
var modal = document.getElementById('myModal'); 
 
// 获取图片模态框，alt 属性作为图片弹出中文本描述 
var img = document.getElementById('myImg'); 
var modalImg = document.getElementById("img01"); 
var captionText = document.getElementById("caption"); 
img.onclick = function(){ 
    modal.style.display = "block"; 
    modalImg.src = this.src; 
    modalImg.alt = this.alt; 
    captionText.innerHTML = this.alt; 
} 
 
// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 
 
// When the user clicks on <span> (x), close the modal 
span.onclick = function() {  
    modal.style.display = "none"; 
}

九、示例

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8">  
<title>CSS教程</title>  
<style> 
#myImg { 
border-radius: 5px; 
cursor: pointer; 
transition: 0.3s; 
} 
#myImg:hover {opacity: 0.7;} 
/* The Modal (background) */ 
.modal { 
display: none; /* Hidden by default */ 
position: fixed; /* Stay in place */ 
z-index: 1; /* Sit on top */ 
padding-top: 100px; /* Location of the box */ 
left: 0; 
top: 0; 
width: 100%; /* Full width */ 
height: 100%; /* Full height */ 
overflow: auto; /* Enable scroll if needed */ 
background-color: rgb(0,0,0); /* Fallback color */ 
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ 
} 
/* Modal Content (image) */ 
.modal-content { 
margin: auto; 
display: block; 
width: 80%; 
max-width: 700px; 
} 
/* Caption of Modal Image */ 
#caption { 
margin: auto; 
display: block; 
width: 80%; 
max-width: 700px; 
text-align: center; 
color: #ccc; 
padding: 10px 0; 
height: 150px; 
} 
/* Add Animation */ 
.modal-content, #caption {     
-webkit-animation-name: zoom; 
-webkit-animation-duration: 0.6s; 
animation-name: zoom; 
animation-duration: 0.6s; 
} 
@-webkit-keyframes zoom { 
from {-webkit-transform: scale(0)}  
to {-webkit-transform: scale(1)} 
} 
@keyframes zoom { 
from {transform: scale(0.1)}  
to {transform: scale(1)} 
} 
/* The Close Button */ 
.close { 
position: absolute; 
top: 15px; 
right: 35px; 
color: #f1f1f1; 
font-size: 40px; 
font-weight: bold; 
transition: 0.3s; 
} 
.close:hover, 
.close:focus { 
color: #bbb; 
text-decoration: none; 
cursor: pointer; 
} 
/* 100% Image Width on Smaller Screens */ 
@media only screen and (max-width: 700px){ 
.modal-content { 
width: 100%; 
} 
} 
</style> 
</head> 
<body> 
<h2>图片模态框</h2> 
<p>本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。</p><p> 
首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。<p> 
<p>然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：</p> 
<img id="myImg" src="http://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights, Norway" width="300" height="200"> 
<!-- The Modal --> 
<div id="myModal" class="modal"> 
<span class="close">×</span> 
<img class="modal-content" id="img01"> 
<div id="caption"></div> 
</div> 
<script> 
// 获取模态窗口 
var modal = document.getElementById('myModal'); 
// 获取图片模态框，alt 属性作为图片弹出中文本描述 
var img = document.getElementById('myImg'); 
var modalImg = document.getElementById("img01"); 
var captionText = document.getElementById("caption"); 
img.onclick = function(){ 
modal.style.display = "block"; 
modalImg.src = this.src; 
modalImg.alt = this.alt; 
captionText.innerHTML = this.alt; 
} 
// 获取 <span> 元素，设置关闭模态框按钮 
var span = document.getElementsByClassName("close")[0]; 
// 点击 <span> 元素上的 (x), 关闭模态框 
span.onclick = function() {  
modal.style.display = "none"; 
} 
</script> 
</body> 
</html>

效果：

CSS 图片详解编程语言

 

原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/16724.html

赞 (0)
0
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论