css - 为什么backgroundSize无效？
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>test</title> <style> *{margin:0; padding:0; box-sizing: border-box} .test{ width: 256px; height:256px; background-image: linear-gradient(to right, transparent 95%, #0ff 95% 100%), linear-gradient(to bottom, transparent 95%, #ccc 0); background-size: 8px 8px; } </style></head><body> <div class="test"></div></body></html>代码如上所示，background-size设置成8px，界面看不到任何效果，使用的是最新的chrome浏览器，请问是什么原因？
共有2个答案
应该是设置的太小了(8px的5%应该是被认为0了，所以没有显示)，设置成10px就可以看到了。
background-size 属性用于设置背景图像的大小。但是，在你的代码中，background-size 设置为 8px 8px 对你的元素并没有产生可见的效果，因为背景图像实际上并没有应用到你的 .test 元素上。
在你的 CSS 代码中，你使用了两个 linear-gradient 函数来创建背景图像，但是你没有指定 background-image 属性应该应用到哪个元素上。在 CSS 中，如果你希望在一个元素上应用多个背景图像，你需要使用逗号分隔每个 background-image 声明，并且每个背景图像都可以有自己的 background-size、background-position、background-repeat 等属性。
在你的情况下，你应该将两个 linear-gradient 函数放在同一个 background-image 属性中，并且为每个渐变指定一个 background-size。例如：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>test</title> <style> *{margin:0; padding:0; box-sizing: border-box} .test{ width: 256px; height:256px; background-image: linear-gradient(to right, transparent 95%, #0ff 95% 100%), linear-gradient(to bottom, transparent 95%, #ccc 0); background-size: 8px 100%, 100% 8px; background-repeat: no-repeat; } </style></head><body> <div class="test"></div></body></html>在这个例子中，我分别为两个渐变设置了 background-size。第一个渐变的 background-size 是 8px 100%，这意味着它的宽度是 8px，高度是元素的整个高度。第二个渐变的 background-size 是 100% 8px，这意味着它的宽度是元素的整个宽度，高度是 8px。我还添加了 background-repeat: no-repeat; 以确保背景图像不会重复。
这样，你应该可以看到两个渐变分别沿着元素的右边和底部延伸，每个渐变的大小都是 8px。
-
问题内容： 有什么原因不能在Internet Explorer或Chrome上运行： 我单击的链接永远不会正常，只会保持粗体。在其他 一些 浏览器上也可以。 编辑 ：更改大小写不影响它。 编辑 ：将a更改为a：link不会影响它。 编辑 ：更改颜色的作品，但不是字体粗细。 编辑 ：解决方法是更改可访问性以忽略网页颜色。我没有访问源的权限，所以我必须这样做。 问题答案： 实际上，这与大小写无关。
-
随着90年代以来Web技术的流行，网站个性化设计的需求也相应增长。 在使用CSS之前，Web开发人员依赖于一些特定的HTML标签和属性来增强网页的视觉体验，而依赖表格来进行布局设计。 和样式有关的一些HTML标签： <basefont> 定义整个网页文档的字体 <font> 定义一个具体的字体类型，颜色和它所包含的文本大小 <center> 水平居中它所包含的元素 <big> 使文本变大 <str
-
本文向大家介绍为什么要使用css sprites？相关面试题，主要包含被问及为什么要使用css sprites？时的应答技巧和注意事项，需要的朋友参考一下 css sprites指的是将该页面请求的图片资源都拼接到一个图片文件上，通过css从拼接好的图片上获取需要的部分。 优点: 一个是减少了HTTP请求的发送次数 一个是合并后的图片一般小于合并前的图片大小总和 缺点： 如果发生改动需要重新做拼接
-
主要内容：CSS 发展史,CSS 的特点CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，它是一种标准的样式表语言，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等）。 CSS 的主要作用是定义网页的样式（美化网页），对网页中元素的位置、字体、颜色、背景等属性进行精确控制。CSS 不仅可以静态地修饰网页，还可以配合 JavaScript 动态地修改网页中元素的样式，而且市面上几乎所有的浏览
-
然而，这是不正确的： 但这很好： 请解释为什么对于无效？这是否是不必要的添加&任何声明为的内容都假定为或类似的内容？
-
问题内容： 我已经多次看到，负填充的前景可能会帮助某些页面元素的CSS开发变得越来越好。但是，W3C CSS中没有负填充的规定。这背后的原因是什么？该属性是否有阻碍其使用的阻碍？感谢您的回答。 更新 例如，我看到的情况是，如果您使用的字体的垂直间距为20px，并且希望在字体底部应用虚线边框，例如出现超链接时。在这种情况下，您会发现样式太简陋，因为虚线边框会出现在指定单词下方20px。如果您使用负边