background

background-clip 和 background-origin

由 荒凉一梦 提交于 2020-04-02 22:23:58
下面都是我自己的理解, 如果有不对的地方, 还请大家帮忙指出. 下面是在 chrome 浏览器上测试的 background-clip 和 background-origin 先说说 background-image background-image 默认的起始位置是 padding 外边缘的左上角. 如下图所示: 但是注意: 默认的结束位置却是 border 外边缘的右下角, 如下图所示: 如果想让起始位置变为 border 外边缘的左上角, 或者内容区域的左上角, 这时就是 background-origin 发挥作用的时候了. background-origin 它的作用就是改变 background-image 左上角的起始位置. 它有三个值: padding-box : 这是它的默认值, 指定 background-image 的左上角是 padding 外边缘的左上角. border-box : 指定 background-image 的左上角是 border 外边缘的左上角. content-box : 指定 background-image 的左上角是 内容区域 的左上角. background-clip 它的作用是指定 background-color 和 background-image 的作用范围. 它也有三个值, 和 background-origin

web前端入门到实战：前端高手在CSS 开发效率的必备片段

由 ╄→尐↘猪︶ㄣ 提交于 2020-04-02 05:52:03
这篇文章会记录我们平时常用到的 CSS 片段，使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的，墙裂建议点赞收藏再看，方便日后查找 清除浮动 浮动给我们的代码带来的麻烦，想必不需要多说，我们会用很多方式来避免这种麻烦，其中我觉得最方便也是兼容性最好的一种是，在同级目录下再创建一个<div></div>；不过这样会增加很多无用的代码。此时我们用:after这个伪元素来解决浮动的问题，如果当前层级有浮动元素，那么在其父级添加上 clearfix 类即可。 // 清除浮动 .clearfix:after { content: "\00A0"; display: block; visibility: hidden; width: 0; height: 0; clear: both; font-size: 0; line-height: 0; overflow: hidden; } .clearfix { zoom: 1; } 垂直水平居中 在 css 的世界里水平居中比垂直居中来的简单一些，经过了多年的演化，依然没有好的方式来让元素垂直居中(各种方式各有优缺点，但都不能达到兼容性好，破坏力小的目标)，以下是几种常见的实现方式 绝对定位方式且已知宽高 专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧

移动端 Retina屏 各大主流网站1px的解决方案

由 吃可爱长大的小学妹 提交于 2020-04-02 05:39:27
Retina屏的移动设备如何实现真正1px的线？ 在retina屏下面，如果你写了这样的meta <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 你将永远无法写出1px宽度的东西，除此之外，inline的SVG等元素，也会按照逻辑像素来渲染，整个页面的清晰度会打折； 先看看 “诸子百家 ” 是如何实现的； 先看看百度糯米的 @media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2) { .normal-goods .good-content { border: none; background-image: -webkit-linear-gradient(90deg,#e0e0e0,#e0e0e0 50%,transparent 50%); background-image: -moz-linear-gradient(90deg,#e0e0e0,#e0e0e0 50%,transparent 50%); background-image: -o-linear-gradient(90deg,

蚂蚁庄园

由 ↘锁芯ラ 提交于 2020-04-02 05:11:26
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>chick</title> <style> html{min-width:320px;overflow-x:hidden} body,html{height:100%;line-height:1;-webkit-user-select:none;//禁止用户复制页面文本 -webkit-touch-callout:none;-webkit-overflow-scrolling:touch;//ios滚动效果 -webkit-font-smoothing:antialiased;//mac下字体 -webkit-tap-highlight-color:rgba(242,137,76,.05);://a标签点击高亮效果} article,aside,blockquote

精灵图片

由 a 夏天 提交于 2020-04-01 20:24:56
精灵图片： 把很多张小图片整合成一张大图片，同时css显示其中一张的小的图标 这个就是图片精灵技术 使用精灵图片的好处： 减少页面的请求次数 页面加载速度比较快 使用方法 background-size 设置背景图片的大小 background-position 设置背景图片的位置移动到你想要的区域 */ /*--> */ 来源： https://www.cnblogs.com/baixuezhemei/p/jinglingtupian.html

background和background-color的区别

由 最后都变了- 提交于 2020-04-01 16:04:18
在设置输入框变成一条线的样式时遇到一个小问题。 无论怎么设置 输入框的背景都没有变 而设置background: #aaa;背景就改变了。 后来发现原因 background 可以设置 背景颜色、背景图片、定位等 background-color 只能设置 背景颜色 设置时仅仅改变了背景色，但此时有一个默认的的background:repeat; 而设置background: #aaa;后，相当于同时设置了background:no-repeat; 既{background-color: #aaa;background:no-repeat;}=={background: #aaa;} 来源： https://www.cnblogs.com/wgbs25673578/p/5336309.html

CSS浏览器兼容问题

由 ♀尐吖头ヾ 提交于 2020-03-30 18:32:32
1. IE6 下双倍浮动问题，display: inline 因为元素是浮动的，display 属性不会影响显示方式。 2. IE6 3px 文本偏移bug，浮动元素设置 margin-right: -3px。 3. min-width 和 min-height 只有 IE6不支持, 对于 height IE6 默认为最小高度，但是width 不是最小宽度。 4. <div><img src='1.jpg' /></div> 所有浏览器图片下方有空隙，通过设置如下属性可以避免。img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 5. 如何让元素与文本输入框居中对齐，只要设置 输入框 vertical-align: middle; 元素设置 display: inline 或者 display: inline-block; 6：定义 1px 在IE6 下，设置 { height: 1px; overflow: hidden; } 或者 zoom: 0.07(小于 0.07也可) 7: hack: 　　 _ IE6 支持; 　　* IE6 和 IE7; 　　\9 IE6和IE6+浏览器 Chrome 和Firefox 不支持 　　\0 IE8 和 IE8+

[UWP]抄抄《CSS 故障艺术》的动画

由 别来无恙 提交于 2020-03-30 13:38:52
1. 前言 什么是故障艺术（Glitch Art 风）？我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式。它有一种魔幻的感觉，看起来具有闪烁、震动的效果，很吸引人眼球。故障艺术它模拟了画面信号出现故障导致成像错误的感觉。青色色块与红色色块无法重合就是这种故障的体现。从胶片时代开始到今天的数码时代，这种故障一直是观众非常熟悉的现象。 上个月看到 CSS 故障艺术 这篇文章，最近想转换心情于是开始抄它的动画了（顺便为博客园的UWP板块吊命）。CSS的 mix-blend-mode 好像很好用，这次用UWP中Win2D的 BlendEffect 模仿它的玩法。 2. 什么是BlendEffect Microsoft.Graphics.Canvas.Effects 命名空间下的 BlendEffect 用于组合两张图片（分别是作为输入源的Background和Foreground），它包含多种模式，如下图所示： 要使用BlendEffect，需要为它设置Mode，并将Foreground和Background设置为 CompositionEffectSourceParameter ： var blendEffect = new BlendEffect() { Mode = BlendEffectMode.Screen, Foreground = new

抽屉新热榜之css

由 微笑、不失礼 提交于 2020-03-30 08:48:02
*{ margin: 0; padding: 0; /*background-color: whitesmoke;*/ } .bottom{ height: 44px; background-color: #2459a2; /*line-height: 44px;*/ /*text-align: center;*/ } .centor{ /*background-color: #00A000;*/ /*background-color: #2459a2;*/ background-color: #2459a2; height: 44px; width: 60%; margin: auto; } .drawer,.classification{ background-color: #2459a2; height: 44px; float: left; line-height: 44px; color: white; } .classification,.login{ font-size: 12px; font-style: normal; font-family: Tahoma, Verdana, Arial, Helvetica, 宋体, sans-serif; } .solr,.login{ background-color: #2459a2; height: 44px;

JavaScript,Dom,jQuery

由 安稳与你 提交于 2020-03-30 05:21:05
JavaScript JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript 语言的规则编写相应代码，浏览器可以解释出相应的处理。 注：在编写代码时要养成一行代码以 “ ; ”（分号）结尾。因为在代码上线的时候，一般会对代码进行压缩，这时所有的JavaScript代码将被压缩为一行这时就需要以分号来识别一行代码的结束。 1，存在方式 文件方式 <script tyoe="text/javascript" src="JS文件"></script> 代码块 <script type="text/javascript"> JS代码 </script> 2，JavaScript 代码存在位置 HTML 的 head 中 HTML 的body代码块底部（推荐，因为HTML是从上到下解析的，放到上面如果代码出现问题无法解析，网站内容就无法正常的显示影响用户体验度） 3，变量 全局变量 局部变量 JavaScript中变量声明非常容易出错，局部变量必须以 var 开头，如果不加表示默认声明的是全局变量 name = "seven" # 全局变量 var name = "seven" # 局部变量 4，注释 // # 单行注释 /* */ # 多行注释 5，数据类型 数字（Number） var age = 18; var age
订阅 background