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>

效果：

（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>

效果：

（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>

效果：

（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>

效果：

（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>

效果：

五、卡片式图片

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 filter 属性用为元素添加可视效果 (例如：模糊与饱和度) 。

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

/*修改所有图片的颜色为黑白 (100% 灰度)*/

img {

    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */

    filter: grayscale(100%);

}

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

七、响应式图片相册

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

    }

}

效果：

八、图片 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 图片的更多相关文章

  1. 几种垂直居中的方式及CSS图片替换技术

    由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px   0; 以上方法针对块级元素和 ...

  2. css图片叠加和底部定位

    css图片叠加和底部定位 css图片叠加 两张图片需要叠在一起显示,如何定位 容器先对定位 第一张图片正常摆放 第二张图片绝对定位,top:0px 这样便实现了两张图片叠加在一起了,设置z-index ...

  3. 转：利用node压缩、合并js,css,图片

    1.安装nodejs http://nodejs.org/ 2.安装各自的node package js我用的是UglifyJS github地址:https://github.com/mishoo/ ...

  4. CSS图片列表

    1.效果图: 2.Example Source Code <h3><a href="http://www.52css.com/">我爱CSS画廊</a ...

  5. 漂亮的自适应宽度的多色彩CSS图片按钮

    一.素材               二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...

  6. css图片垂直居中

    css图片垂直居中一.style代码 .case-pic{ height: 125px; position: relative; text-align: center } .case-pic span ...

  7. css 图片 圆形显示区域

    css 图片 圆形显示区域 css 和 div 实现 方形图片 圆形显示 点击下载

  8. CSS图片翻转动画技术详解

    因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...

  9. css图片的相关操作

    css图片的相关操作 1.案例源码 <!DOCTYPE html><html lang="en"><head> <meta charset ...

  10. CSS图片下面产生间隙的6种解决方案

    CSS图片下面产生间隙的6种解决方案 在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是 ...

随机推荐

  1. [Android] 开源框架 xUtils HttpUtils 代理设置 (Temporary Redirect错误)

    今天简单学习了一下xUtils的使用 https://github.com/wyouflf/xUtils 其中用到HttpUtils模块时,发现总是出现Temporary Redirect 错误. 查 ...

  2. 打包签名时出现Conversion to Dalvik format failed with error 1

    今天在导出签名APK时,居然出现了“Conversion to Dalvik format failed with error 1” 于是,我习惯性地“Project”->“Clean”,把工程 ...

  3. iOS 10 获取相册相机权限

            AVAudioSession *audioSession = [[AVAudioSession alloc]init]; [audioSession requestRecordPerm ...

  4. Buffer Data

    waylau/netty-4-user-guide: Chinese translation of Netty 4.x User Guide. 中文翻译<Netty 4.x 用户指南> h ...

  5. BitCoin Trading Strategies BackTest With PyAlgoTrade

    Written by Khang Nguyen Vo, khangvo88@gmail.com, for the RobustTechHouse blog. Khang is a graduate f ...

  6. 七个可以提升python程序性能的好习惯，你知道吗?

    掌握一些技巧,可尽量提高Python程序性能,也可以避免不必要的资源浪费.今天就为大家带来七个可以提升python程序性能的好习惯,赶快来学习吧:. 1.使用局部变量 尽量使用局部变量代替全局变量:便 ...

  7. 005-Shell echo命令

    一.概述 Shell 的 echo 指令,用于字符串的输出.命令格式: echo string 可以使用echo实现更复杂的输出格式控制. 1.显示普通字符串: echo "It is a ...

  8. Angular 笔记系列（二）数据绑定

    数据绑定这块儿没啥说的,简单两个例子带过了. Hello World: <!DOCTYPE html> <html ng-app> <head> <title ...

  9. 一、html

    一.html相关概念 html是 htyper text markup language 即超文本标记语言,超文本就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素,而标记语言:即标记(标签) ...

  10. XDU 1056

    解法一:简单搜索肯定TLE,只是单纯的想写一发搜索练练手 #include<cstdio> #include<cstring> #define maxn 1005 using ...