Safari 中的背景失真

【问题标题】：Background in safari is distortedSafari 中的背景失真
【发布时间】：2016-09-28 15:30:24
【问题描述】：

我正在开发一个新客户的网站，除 safari 外，所有浏览器中的一切看起来都不错。问题：背景图片没有响应 safari 中的 css（5px 大小）。

.et_pb_section_0 {  /* The background CSS */
    background: url(http://www.elsyf-staging.com/esm/wp-content/uploads/2016/05/bg.png) 5px;
}

我无法找到有关此问题的任何确切信息。

由于 Safari 与 chrome 共享 webkit 功能，因此尝试解决此问题导致网站在 chrome 中中断。有没有专门针对 safari 的方法？

【问题讨论】：

标签： css safari

【解决方案1】：

在 CSS background 速记属性中，background-position 位于 background-size 之前。这使您的5px 对应于background-position，而不是background-size。

要解决此问题，请添加 background-position 并用斜杠将其与 background-size 分开：

.et_pb_section_0 {
    background: url("http://www.elsyf-staging.com/esm/wp-content/uploads/2016/05/bg.png") 0 / 5px;
}

或者，分别定义background-image 和background-size：

.et_pb_section_0 {
    background-image: url("http://www.elsyf-staging.com/esm/wp-content/uploads/2016/05/bg.png");
    background-size: 5px;
}

【讨论】：