小编Ana*_*Ana的帖子

还有其他人有这个问题吗？我创建网站为生,有些人使用css属性background-size: cover.大约一周前,所有具有此属性的网站都不再显示在Google Chrome中.(所有其他浏览器都运行正常.)还有其他人遇到过这种情况吗？它只是我的谷歌铬或做了一些改变？因为背景在大约一周前正常显示,我没有改变任何东西.他们刚刚停止正常展示,似乎无处不在......

我正在尝试从 CSS 网格布局开始编写砌体布局（请不要建议使用库，是的，我知道新的 Firefox CSS 砌体功能，但我需要更好的支持）。

HTML 看起来像这样，一个包含一堆不同纵横比的图像的部分：

<section class='grid--masonry'>
    <img src='black_cat.jpg' alt='black cat'/>
    <!-- and so on, more images following the first -->
</section>

样式非常基本，只需设置网格：

$w: Min(8em, 100%);
$s: .5rem;

.grid--masonry {
  display: grid;
  grid-template-columns: repeat(auto-fit, $w);
  grid-gap: $s;
  padding: $s;
    
  > * { width: $w }
}

在 JS 中，第一步是获取网格、它的元素节点（过滤掉文本节点）、网格间隙和初始化列数：

然后，在页面加载后，我调用layout()函数：

addEventListener('load', e => {     
  layout(); /* initial load */
  addEventListener('resize', layout, false) /* on resize */
}, false)

该layout()函数执行以下操作：

• 获取left每个网格项的偏移量
• 由于这些偏移量对于同一列上的项目是相同的，因此它创建了一组偏移量，其大小为当前列数 …

我想创建一个有角度的文本流，其中文本行的宽度是已知值--w. What I have so far is the code below:

* { margin: 0 }\n\nhtml, body { display: grid }\n\nbody {\n  --w: min(35em, 65vw);\n  --f: 1/ 8;\n  background: linear-gradient(90deg, transparent var(--w), pink 0);\n  font: 1em ubuntu, sans-serif\n}\n\n.outer-wrapper {\n  width: min-content;\n  box-shadow: 0 0 0 2px red;\n  background: lemonchiffon\n}\n\nspan::before, span::after {\n  --i: 0;\n  --j: calc(1 - var(--i));\n  --g: \n    linear-gradient(to right bottom, \n        hsla(50, 50%, 50%, var(--j)) 50%, \n        hsla(50, 50%, 50%, var(--i)) 0);\n  float: left;\n …

我有以下结构

<h2>
  <svg viewBox='-5 -40 100 50'>
    <!-- some filters that get applied on the elements below -->
    
    <clipPath id='c'>
      <text id='t'>Scooby</text>
    </clipPath>
    
    <g clip-path='url(#c)'>
      <rect x='-5' y='-40' width='100%' height='100%'/>
      <path/>
    </g>
    
    <use xlink:href='#t'/>
    <use xlink:href='#t'/>
  </svg>
</h2>

我怎样才能确保屏幕阅读器只能看到("Scooby")text内部一次？clipPath

我知道SVG text应该由屏幕阅读器阅读,但是当它在一个元素内时仍然是这样clipPath吗？use它的副本怎么样？

我正在使用这种结构,以便在标题文本上获得一些奇特的效果(想想这样的东西)(并抛弃当前使用的.jpg图像).

我有以下HTML:

<div class='box'>text</div>?

和CSS:

.box {
    /* non-essential */
    display: inline-block;
    margin: 2em;
    background: plum;

    /* ESSENTIAL */
    transform: rotate(45deg);
    font-family: Courier;
}?

而这就是小提琴.我在这里省略了前缀,但它们在小提琴中.

预期结果:

这也是我在Chrome,Firefox,IE9,Safari中获得的结果.

但是,在Opera中它看起来像这样:

• 如果我取出变换(即div不再旋转),则显示文本.
• 如果我用另一个替换字体,则显示文本.

那么为什么会发生这种情况以及我有其他解决方案呢？

如果这有帮助:

我有两种类型的元素，我们称它们为.a和.b。

他们可能在上面设置了一些CSS动画。我无法控制这些关键帧，是否已设置关键帧，无法设置动画。

他们可能在做动画opacity。不过，我想在opacity我的.a元素要留一定的价值，让我们说1，不管它是否为动画与否。

考虑以下代码，其中有三种情况：

1. 我的元素上没有设置动画
2. 有动画，但不是动画 opacity
3. 有一个动画，opacity并且在被动画的属性中

div {
  /* some dummy styles so we can see stuff */
  display: inline-block;
  width: 5em; height: 5em;
  background: purple;
}

[class*='ani'] { animation: a 1s ease-out infinite alternate }

.ani--one { animation-name: ani-one }

@keyframes ani-one { to { transform: scale(.5) } }

.ani--two { animation-name: ani-two }

@keyframes ani-two {
  to {
    opacity: 0;
    background: orange; …

我想用两个变换scale和translateX,但每一个不同的计时功能.目前我使用绝对定位代替translateX,如下:

transition: transform 500ms cubic-bezier(0.390, -0.600, 1.000, -0.600), 
            left 500ms cubic-bezier(0.270, 0.875, 0.575, 0.870);

.

left: -50px ;
transform: scale(2,2) ;

你会如何重写这一点来达到同样的目的,但是用它translateX代替left？

我在数学和几何方面都不擅长,所以如果有人可以帮我创建以下形状,我会很高兴:

所以基本上形状存在于3个矩形中,我得到前两个完美的变换矩阵,但我不能得到最后一个匹配形状(参见上面的链接img)

JSFiddle,到目前为止我尝试过或看到下面的代码

HTML

<div class="shape">
  <div class="shape-rect-one"></div>
  <div class="shape-rect-two"></div>
  <div class="shape-rect-three"></div>
</div>?

CSS

.shape {
  perspective: 1000px;
}

.shape div {
  width: 100px;
  height: 100px;
  opacity: 0.4;
  background-color: #333;
}

.shape-rect-one {
  z-index: 100;

  transform: matrix(1, -0.40, 0, 1, 0, 0);
  -webkit-transform: matrix(1, -0.40, 0, 1, 0, 0);
}

.shape-rect-two {
  z-index: 200;

  transform: matrix(1, -0.40, 0, 1, 0, 0);
  -webkit-transform: matrix(1, 0.40, 0, 1, 0, 0);
}

.shape-rect-three {
  z-index: 300;
}?

我使用CSS3 transform和animation功能创建了一个动画.现在我想禁止在Opera上显示动画.

当我@-o-keyframes leftright { 0% { left: -10%; } 100%{ left: 101%;}}从css中删除opera特定代码()时,动画不会在Opera上自动禁用.

但是当我删除默认动画代码(@keyframes leftright { 0% { left: -10%; }100%{ left: 101%;}})时,它会在Opera上禁用它自己.

我想在Opera上禁用它而不删除默认代码.

这是代码

@keyframes leftright {  0% { left: -10%; }100%{ left: 101%;}}
@-moz-keyframes leftright { 0% { left: -10%; }  100%{ left: 101%;}}
@-webkit-keyframes leftright {  0% { left: -10%; }  100%{ left: 101%}}
@-o-keyframes leftright { 0% { left: -10%; } 100%{ left: 101%;}} 

有没有办法让这件事情完成？

我想开始一个CSS转换,background-color如果单击一个按钮,它会改变和维度.但是代码中有一个错误:

小提琴

jQuery的

$(function() {

$('#change').click(function() {
    $('#box').addClass('change');
});
});

HTML

<div id="box" class="start"></div>

<div id="button">click</div>

CSS

.start{

height:100px;
width:100px;
background: black;
transition: all 2.0s linear;
-webkit-transition: all 0.8s linear;
-moz-transition: all 0.8s linear;
-ms-transition: all 0.8s linear;
-o-transition: all 0.8s linear;
}

.change{
width: 200px;
height: 200px;
background:yellow;
}

#button{
width: 80px;
height: 20px;
padding: 4px;
margin: 5px;
border:solid 1px black;
 background: grey;
cursor: pointer;
color: white;
}