CSS怎么让一张彩色的图片显示为黑白照片

这篇文章主要介绍“CSS怎么让一张彩色的图片显示为黑白照片”，在日常操作中，相信很多人在CSS怎么让一张彩色的图片显示为黑白照片问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS怎么让一张彩色的图片显示为黑白照片”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！一、黑白图像当你需要让一张彩色的图片显示为黑白照片的时候，你可以用下面的一段代码。img.desaturate{filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);}二、使用 :not() 在菜单上应用/取消应用边框先给每一个菜单项添加边框.nav li{border-right: 1px solid #666;}然后再除去最后一个元素.nav li:last-child{border-right: none;}也可以直接使用 :not() 伪类来应用元素.nav li:not(:last-child){border-right: 1px solid #666}如果你的元素有兄弟元素的话，也可以使用通用的兄弟选择符( ~ ）.nav li:first-child ~ li{border-left: 1px solid #666}三、页面顶部阴影给网页加上漂亮的顶部阴影效果body:before{content: ”;position: fixed;top: -10px;left: 0;width: 100%;height: 10px;-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);box-shadow: 0px 0px 10px rgba(0,0,0,.8);z-index: 100;}四、给 body 添加行高不需要给别给 p,h之类的添加行高，直接：body{line-height: 1;}五、所有一切都垂直居中html,body{height: 100%;margin: 0;}body{-webkit-align-items: center;-ms-flex-align: center;align-items: center;display: -webkit-flex;display: flex;}IE11中需要注意 flexbox六、逗号分隔列表让HTML列表项看上去像被一个真正的，分隔的列表ul > li:not(:last-child)::after{content: “，”;}七、使用负的 nth-child 选择项目在 css 中使用负的 nth-child 选择项目1到项目nli{display: none;}li:nth-child(-n+3){display: block;}八、对图标使用 SVG.logo{background: url(“logo.svg”);}九、优化显示文本有时候，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你html{-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;text-rendering: optimizelegibility;}十、对纯 css 滑块使用 max-height使用 max-height 和溢出隐藏来实现只有 css 的滑块.slider ul{max-height: 0;overflow: hidden;}.slider:hover ul{max-height: 1000px;transition: .3s ease;}十一、继承 box-sizing让 box-sizing 继承 htmlhtml{box-sizing: border-box;}*,*:before, *:after{box-sizing: inherit;}十二、表格单元格等宽.table{table-layout: fixed;}十三、 用 Flexbox 摆脱外边距的各种 hack当你需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱 nth- first- last-chlid 的 hack 了.list{display: flex;justify-content: space-between;}.list .person{flex-basis: 23%;}十四、使用属性选择器用于空链接当 a 元素没有文本值，但是 href 属性有链接的时候显示链接a[href^=”http”]:empty::before{content: attr(href);}十五、检测鼠标双击HTML： Double click meCSS：.test span{position: relative;}.test span a{position: relative;z-index: 2;}.test span a:hover,.test span a:active{z-index: 4;}.test span input{background-color: transparent;border: 0;cursor: pointer;position: absolute;top: -1px;left: 0;width: 101%;height: 301%;z-index: 3;}.test span input:focus{background-color: transparent;border: 0;z-index: 1;}十六、 CSS 写出三角形div.arrow-up{width: 0px;height: 0px;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 5px solid #ccc;font-size: 0px;line-height: 0px;}div.arrow-down{width: 0px;height: 0px;border-bottom: 5px solid transpar免费云主机域名ent;border-top: 5px solid transparent;border-right: 5px solid #ccc;font-size: 0px;line-height: 0px;}div.arrow-left{width: 0px;height: 0px;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-left: 5px solid #ccc;font-size: 0px;line-height: 0px;}div.arrow-right{width: 0px;height: 0px;border-bottom: 5px solid transparent;border-top: 5px solid transparent;border-left: 5px solid #ccc;font-size: 0px;line-height: 0px;}十七、 CSS calc() 的使用calc() 用法类似于函数，能够给元素设置动态的值.simpleBlock{width: calc(100% – 100px);}.complexBlock{width: calc(100% – 50% / 3);padding: 5px calc(3% – 2px);margin-left: calc(10% + 10px);}十八、文本渐变h3[data-text]{position: relative;}h3[data-text]::after{content: attr(data-text);z-index: 10;color: #e3e3e3;position: absolute;top: 0;left: 0;-webkit-mask-image: -webkit-gradient(linear, left top,left bottom,from(rgba(0,0,0,0)),color-stop(50%,rgba(0,0,0,1)),to(rgba(0,0,0,0)));}十九、禁用鼠标事件.disabled{pointer-events: none;}二十、模糊文本.blur{color: transparent;text-shadow: 0 0 5px rgba(0,0,0,.5);}到此，关于“CSS怎么让一张彩色的图片显示为黑白照片”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注百云主机网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: CSS div间距怎么设置

这篇文章主要介绍“CSS div间距怎么设置”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS div间距怎么设置”文章能帮助大家解决问题。 DIV之间距离 让两个高低构造DIV块距离为零，通常熟手在行在出产DIV …