首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【CSS】CSS 总结 ③ ( CSS 背景设置 | 背景颜色 | 背景图片 | 背景图片平铺样式 | 背景图片位置 | 超大背景图片设置 | 背景附着 | 背景样式简写 | 背景半透明 ) ★

    CSS 的背景图片样式语法 : 背景图片的链接需要写在 url() 中 , 并且 url() 中的链接可以没有双引号 ; background-image: url(相对路径); 在 url() 中设置相对链接...网页背景兼容问题 在网站开发时 , 经常遇到 网站首页使用超大背景图片显示 的情况 , 如 : 背景图片 使用 1920 x 1080 像素的图片 ; 每个人的电脑分辨率不同 , 有的电脑的分辨率可能没有..., 这里建议将核心内容放在中心位置 ; 如果 电脑分辨率高于图片分辨率 , 则显示全部内容 , 并且外面还有空白边框存在 ; 超大背景图片推荐定位 因此这里要设置图片背景的位置 , 一般超大背景图片的背景定位都使用...; 超大背景图片编辑策略 图片编辑策略 : 在高分辨率的电脑上可以显示全部内容 , 在低分辨率的电脑上只能显示下图红色矩形框中的内容 , 这里建议 将图片的核心内容放在 图片的中心偏上的位置 ,..., 照常显示 ;

    10.5K10

    解决IE响应式的解决方案css3-mediaqueries.js不生效问题

    前阵子解决了博客在低版本 IE 下会假死的问题,发现居然是因为我自定义 CSS 的闭合误用了中文大括号导致的! 解决这个问题之后,又发现了另外一个坑:发现博客在 IE8 及以下版本的响应式不生效。...[endif]--> 其中 css3-mediaqueries 就是用来解决IE8 及以下版本浏览器不支持 CSS3 media queries 的问题的。...当然,这种方式肯定会比纯 css 效率低得多,IE 下很明显会略显迟钝,大家自行体验。 经过测试发现,鸟哥的博客在 IE8 下的响应式除了略卡一点,并没有出现响应式失效的情况,为啥我博客就不行呢?...比如,Begin 主题大部分响应式属性的代码都写在了 style.css,那么要解决这个 IE 兼容性问题,只需要将 style.css 使用和网站相同的域名即可,而不能使用二级域名的 CDN 了!...将 style.css 中响应式写法的 css 代码全部复制一份,放到额外的一个 css 文件中,然后使用和网站相同域名,引入到 head 部分的 IE 判断语句中即可!

    3K90

    【CSS】CSS 背景设置 ④ ( 超大背景图片设置 | 背景图片定位设置 background-position: center top; )

    文章目录 一、超大背景图片设置 1、超大背景图片问题 2、超大背景图片默认显示 3、超大背景图片推荐定位方式 4、超大背景图片编辑策略 二、代码示例 1、背景图片展示 2、代码示例 3、展示效果...一、超大背景图片设置 ---- 1、超大背景图片问题 在网站开发时 , 经常遇到 网站首页使用超大背景图片显示 的情况 , 如 : 背景图片 使用 1920 x 1080 像素的图片 ; 每个人的电脑分辨率不同..., 这里建议将核心内容放在中心位置 ; 如果 电脑分辨率高于图片分辨率 , 则显示全部内容 , 并且外面还有空白边框存在 ; 2、超大背景图片默认显示 如果设置了大图片作为背景 , 原图片 :...如果电脑分辨率很小 , 则只能看到图片背景的左上角 ; 如果电脑分辨率很大 , 则大图片背景显示在屏幕的左上角 ; 3、超大背景图片推荐定位方式 因此这里要设置图片背景的位置 , 一般超大背景图片的背景定位都使用...; 4、超大背景图片编辑策略 图片编辑策略 : 在高分辨率的电脑上可以显示全部内容 , 在低分辨率的电脑上只能显示下图红色矩形框中的内容 , 这里建议 将图片的核心内容放在 图片的中心偏上的位置

    2.8K20

    CSS显示模式

    CSS显示模式 块元素 独占一行 高度,宽度,外边距以及内边距都能控制 宽度默认是100% 是一个容器及盒子,里面可以放行内或者块级元素 行内元素 一行可以显示多个 宽高无法设置 默认高度是本身内容的宽度...行内元素只能容纳文本或行内元素 行内块元素 宽高可调 一行多个 默认高度是本身内容的宽度 CSS模式转化 行内元素转块级元素:display: block; 块元素转化为行内元素:display:inline...; 转化为行内块元素:display:inline-biock; 注意:单行文字垂直居中,让行高等于盒子的高度 CSS背景 背景图片:background-image:url(地址) 注意:会默认铺满盒子...背景平铺 背景图像滚动 背景图片位置; 背景颜色半透明 用 background: rgba(); 来实现 background:rgba(0,0,0,0.3); 注意: "a"是alpha透明度的意思...可以把0.3中的0省略掉,写出 .3 盒子的内容不受影响 背景总结 属性 作用 值 background-color 背景颜色 预定义的颜色值/十六进值/RGB代码 background-image 背景图片

    1.6K00
    领券