CSS3 图片

其他 2018-06-21 14:32:41 阅读次数: 3

圆角图片

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			img {
				border-radius:8px;
			}
			
			
		</style>
	</head>
	<body >
		<h2>圆角图片</h2>
		<p>使用 border-radius属性来创建圆角图片：</p>
		<img src="paris.jpg" alt="Paris" width="400" height="300" >
	</body>
</html>

椭圆形图片：

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			img {
				border-radius:50%;
			}
			
			
		</style>
	</head>
	<body >
		<h2>圆角图片</h2>
		<p>使用 border-radius属性来创建圆角图片：</p>
		<img src="paris.jpg" alt="Paris" width="400" height="300" >
	</body>
</html>

缩略图

    我们使用border属性来创建缩略图

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			img {
				border:1px solid #ddd;
				border-radius:4px;
				padding:5px;
			}
			
			
		</style>
	</head>
	<body >
		<h2>缩略图</h2>
		<p>我们使用 border 属性来创建缩略图。</p>
		<img src="paris.jpg" alt="Paris" width="400" height="300" >
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			a {
				display:inline-block;
				border:1px solid #ddd;
				border-radius:4px;
				padding:5px;
				transition:0.3s;
			}
			
			a:hover {
				box-shadow:0 0 2px 1px rgba(0,140,186,0.5);
			}
			
			
		</style>
	</head>
	<body >
		<h2>缩略图作为连接</h2>
		<p>我们使用 border 属性来创建缩略图。在图片外层添加一个链接。</p>
		<p>点击图片查看效果：</p>

		<a target="_blank" href="paris.jpg">
		  <img src="paris.jpg" alt="Paris" width="400" height="300">
		</a>
	</body>
</html>

响应式图片

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

   实例中，你可以通过重置浏览器大小查看效果，如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			img {
				max-width:100%;
				height:auto;
			}
			
			
		</style>
	</head>
	<body >
		<h2>响应式图片</h2>
		<p>响应式图片会自动适配各种尺寸的屏幕。</p>
		<p>通过重置浏览器大小查看效果:</p>

		<img src="http://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
	</body>
</html>

图片文本

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<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;
			}
			
			.topleft {
				position:absolute;
				top:8px;
				left:16px;
				font-size:18px;
			}
			
			.bottomleft {
				position:absolute;
				bottom:8px;
				left:16px;
				font-size:18px;
			}
			
			.topright {
				position:absolute;
				top:8px;
				right:16px;
				font-size:18px;
			}
			
			.bottomright {
				position:absolute;
				bottom:8px;
				right:16px;
				font-size:18px;
			}
			
			img {
				width:100%;
				height:auto;
				opacity:0.3;
			}
		</style>
	</head>
	<body >
		<h2>图片文本</h2>
		<p>在图片左上角添加文本信息:</p>

		<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 class="topright">右上角</div>
		  <div class="bottomleft">左下角</div>
		  <div class="bottomright">右下角</div>
		  <div class="center">居中</div>
		</div>
	</body>
</html>

卡片式图片

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			body {
				margin:25px;
			}
			
			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);
				margin-bottom:25px;
			}
			
			div.container {
				text-align:center;
				padding:10px 20px;
			}
		</style>
	</head>
	<body >
		<h2>响应式卡片</h2>
		<p>在图片左上角添加文本信息:</p>

		<div class="polaroid">
		  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
		  <div class="container">
			<p>The Troll's tongue in Hardanger, Norway</p>
		  </div>
		</div>

		<div class="polaroid">
		  <img src="lights600x400.jpg" alt="Norway" style="width:100%">
		  <div class="container">
			<p>Northern Lights in Norway</p>
		  </div>
		</div>
	</body>
</html>

图片滤镜

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			img {
				width:33%;
				height:auto;
				float:left;
				max-width:235px;
			}
			
			.blur {-webkit-filter: blur(4px);filter: blur(4px);}
			.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}
			.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
			.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
			.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
			.invert {-webkit-filter: invert(100%);filter: invert(100%);}
			.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
			.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
			.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
			.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
		</style>
	</head>
	<body >
		<p><strong>注意:</strong> Internet Explorer <span lang="no-bok">或 Safari 5.1 (及更早版本)</span> 不支持该属性。</p>

		<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
		<img class="blur" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
		<img class="brightness" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
		<img class="contrast" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
		<img class="grayscale" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
		<img class="huerotate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
		<img class="invert" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
		<img class="opacity" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
		<img class="saturate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
		<img class="sepia" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
		<img class="shadow" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
	</body>
</html>
响应式图片相册 
<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			div.img {
				border: 1px solid #ccc;
			}

			div.img:hover {
				border: 1px solid #777;
			}

			div.img img {
				width: 100%;
				height: auto;
			}

			div.desc {
				padding: 15px;
				text-align: center;
			}

			* {
				box-sizing: border-box;
			}

			.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%;
				}
			}

			.clearfix:after {
				content: "";
				display: table;
				clear: both;
			}
		</style>
	</head>
	<body >
		<h2 style="text-align:center">响应式图片相册</h2>

		<div class="responsive">
		  <div class="img">
			<a target="_blank" href="img_fjords.jpg">
			  <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
			</a>
			<div class="desc">Add a description of the image here</div>
		  </div>
		</div>


		<div class="responsive">
		  <div class="img">
			<a target="_blank" href="img_forest.jpg">
			  <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_forest.jpg" alt="Forest" width="600" height="400">
			</a>
			<div class="desc">Add a description of the image here</div>
		  </div>
		</div>

		<div class="responsive">
		  <div class="img">
			<a target="_blank" href="img_lights.jpg">
			  <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights" width="600" height="400">
			</a>
			<div class="desc">Add a description of the image here</div>
		  </div>
		</div>

		<div class="responsive">
		  <div class="img">
			<a target="_blank" href="img_mountains.jpg">
			  <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_mountains.jpg" alt="Mountains" width="600" height="400">
			</a>
			<div class="desc">Add a description of the image here</div>
		  </div>
		</div>

		<div class="clearfix"></div>

		<div style="padding:6px;">
		  
		  <h4>重置浏览器大小查看效果</h4>
		</div>

	</body>
</html>

图片 Modal(模态)

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<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>

猜你喜欢

转载自blog.csdn.net/lengyuezuixue/article/details/80711023
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022