css3学习笔记之图片

最新推荐文章于 2024-10-16 16:26:58 发布
最新推荐文章于 2024-10-16 16:26:58 发布
阅读量77 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/aiyoubucuoo/p/5437769.html
版权

圆角图片

border-radius:
圆角图片:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
< html >
< head >
< 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 >
椭圆形图片:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
< html >
< head >
< 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 >

缩略图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
< html >
< head >
< style >
img {
     border: 1px solid red;
     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 >

响应式图片

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
< html >
< head >
< 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 >

图片文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
< html >
< head >
< style >
.container {
     position: relative;
}
 
.topleft {
     position: absolute;
     top: 8px;
     left: 16px;
     font-size: 18px;
}
 
.topright {
     position: absolute;
     top: 8px;
     right: 16px;
     font-size: 18px;
}
 
.bottomleft {
     position: absolute;
     bottom: 8px;
     left: 16px;
     font-size: 18px;
}
 
.bottomright {
     position: absolute;
     bottom: 8px;
     right: 16px;
     font-size: 18px;
}
 
.center {
     position: absolute;
     left: 0;
     top: 50%;
     width: 100%;
     text-align: center;
     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 >
 

卡片式图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
< html >
< head >
< 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 >
 
< 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 >

图片滤镜

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
< html >
< head >
< 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 >

响应式图片相册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
< html >
< head >
< 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(模态)

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
< html >
< head >
< 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 >
 
 
 

转载于:https://www.cnblogs.com/aiyoubucuoo/p/5437769.html

weixin_30425949
关注
CSS下拉菜单
badui4155的博客
04-09 153
例子： 鼠标移动到按钮上打开下拉菜单。（在这里我将下拉菜单的内容的链接设置为百度首页） 下拉菜单 菜单内容 1 菜单内容 2 菜单内容 3 HTML 部分： 制作下拉菜单可以使用任何的 HTML元素来打开下拉菜单，如：<span>, 或 <button> 元素。 使用容器元素 (如： <div>) 来创...
CSS（二十九）
shi199434的博客
12-09 162
CSS 图片廊 以下是使用CSS创建图片廊： 这里添加图片文本描述 这里添加图片文本描述 这里添加图片文本描述 这里添加图片文本描述 图片廊 以下是使用 CSS 创建图片廊： 实例 div class="responsive"> div class
CSS入门学习笔记+案例
热门推荐
itboy
06-16 31万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS学习笔记
u011259405的博客
09-24 1062
自用CSS学习笔记
CSS学习笔记：背景图片样式
weixin_42576837的博客
10-16 1530
CSS学习笔记
CSS学习笔记整理
bfbshs_ddd的博客
12-16 1748
整理过去的CSS学习笔记。CSS 即 层叠样式表/CSS样式表/级联样式表，也是标记语言， 用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距）以及版面的布局和外观显示样式
尚硅谷CSS学习笔记
MissXu666的博客
10-10 1422
等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。③维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。我们在编码时，不用过于关注浏览器的私有前缀，不用去记忆，去查询，因为常用的css3 新特性，主流浏览器都是支持的，对于老版本浏览器，我们也可以借助现代构建工具，去帮我们添加私有前缀。
CSS3学习笔记---响应式布局初略_css3响应式设备宽度
2401_84418948的博客
04-28 1025
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
千峰HTML5+CSS3学习笔记
李英俊小朋友
08-31 2628
我的千峰HTML5+CSS3学习笔记
CSS 学习笔记
weixin_42098295的博客
05-06 1279
定位（Positioning）：static, relative, absolute, fixed, sticky。组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)。媒体查询（Media Queries）：根据不同的屏幕尺寸或设备特性应用不同的样式。属性选择器：根据元素属性选择，如 [type="text"]。Grid：二维布局模型，提供网格系统，进行更复杂的布局设计。伪元素选择器：如 ::before, ::after。
css基础学习笔记之字体图标
01-08
3.一旦完整精灵图片制作完成后想要更换非常复杂 二、字体图标–iconfont：展示的是图片，本质是属于字体，字体图标有三个优点如下： 1.轻量级：一个图标要比一系列的图像小，一旦字体加载了，图标马上就会渲染出来，...
html+css和html5+css3的学习笔记。
06-10
学习HTML+CSS和HTML5+CSS3时，你需要理解以下关键概念： 1. **语义化HTML**：使用恰当的标签来描述内容，提高可读性和可访问性。 2. **盒模型**：理解边距（margin）、填充（padding）和边框（border）如何影响元素...
《CSS3》学习笔记大全
04-12
"CSS3 学习笔记大全" CSS3 是当前 Web 开发中最重要的样式表语言之一，它能够使得网页变得更加炫酷，之前需要用 JavaScript 才能实现的效果现在用 CSS3 就可以轻松实现。下面是 CSS3 的一些重要知识点： CSS3 简介...
CSS3学习笔记
08-10
**CSS3学习笔记** 在网页设计领域，CSS（层叠样式表）是用于定义HTML或XML（包括SVG、XHTML等）文档呈现的关键技术。随着技术的不断发展，CSS3已经成为了现代网页设计的标准，提供了丰富的样式控制和布局能力。本...
npm 和 npx 的区别和使用场景
Dou_Hua6的博客
10-09 683
自动下载和缓存：如果本地未安装所需包，npx会自动下载并执行，执行完毕后可以选择保留或删除。脚本运行：通过package.json中的scripts字段定义和运行自定义脚本。依赖管理：管理项目的dependencies和devDependencies。简化命令行工具的使用：临时执行命令，避免全局安装带来的版本冲突或污染。npm 全称：Node Package Manager。发布包：将自己的包发布到npm注册表供他人使用。：无需全局安装即可运行npm包中的可执行文件。
【JavaScript】移动色块案例 实现一个可以拖动并且在拖动过程中会自动改变颜色的色块（JS 事件监听器）
m0_66584716的博客
10-11 1340
- **移动色块**：用户可以通过鼠标按住并拖动页面上的红色方块（`#blocks`）。当用户按下鼠标左键时，色块开始跟随鼠标的移动而移动；当用户释放鼠标左键时，色块停止移动。 - **显示当前位置**：随着色块的移动，其当前的屏幕坐标（相对于浏览器窗口）会被实时更新，并显示在页面底部左侧的位置显示区域（`#positionDisplay`）中。 - **自动变色**：一旦用户开始拖动色块，系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 `getRandomColor()` 函数生成一个
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 589
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 509
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)
最新发布
源码好优多
10-16 407
请联系我获取更详细的演示视频。
HTML与CSS基础学习笔记
“html和css笔记，包括HTML基础、XHTML注意事项、常用标签等内容，结合了书籍、网站和知名专家的资源，以及各种网页调试工具的介绍。” HTML与CSS是构建网页设计的基础，它们分别负责网页的结构和样式。HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值