Почему в теле не работает background-origin
Background-origin успешно протестирован в div, но не в теле https://chestnuttree.github.io/helloWord/pic1.png
Затем я узнал, что фоновое происхождение тела работает, добавляя цвет фона к родительскому элементу тела, HTML https://chestnuttree.github.io/helloWord/pic2.png
body {
padding: 10px;
background: url(/i/eg_bg_03.gif) no-repeat #58a bottom right;
background-origin: content-box;
}
html {
background: #fff;
}Почему это ?
@Seno: я обнаружил эту проблему, когда изучал некоторые связанные свойства CSS и практиковал демонстрацию, но не нашел причину. мне было немного любопытно
Ответы 1
Фон, примененный к элементу body, особенный, потому что он будет распространяться на html, а затем на холст:
For documents whose root element is an HTML HTML element or an XHTML html element [HTML]: if the computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element’s first HTML BODY or XHTML body child element. The used values of that BODY element’s background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element. red
В приведенном ниже примере я применяю фон к телу, но на самом деле эти свойства применяются к html, поэтому заполнение не влияет на вычисление источника.
body {
padding: 10px;
background: url(https://picsum.photos/id/10/50/50) no-repeat #58a bottom right;
background-origin: content-box;
margin:0;
height:100vh;
box-sizing:border-box;
}Вместо этого добавьте отступы в html, и background-origin будет работать:
body {
background: url(https://picsum.photos/id/10/50/50) no-repeat #58a bottom right;
background-origin: content-box;
margin:0;
height:100%;
padding:10px;
box-sizing:border-box;
}
html {
padding:10px;
height:100%;
box-sizing:border-box;
}Или примените к html фон, отличный от transparent, и вы остановите распространение:
body {
background: url(https://picsum.photos/id/10/50/50) no-repeat #58a bottom right;
background-origin: content-box;
margin:0;
height:100%;
padding:10px;
box-sizing:border-box;
}
html {
padding:10px;
height:100%;
box-sizing:border-box;
background:red;
}
Просто интересно, для чего вам нужен
background-origin? Чего вы пытаетесь достичь?