css3怎么定位背景,CSS3 使用padding来同步背景定位

CSS

语言：

CSSSCSS

确定

pre.box {

padding: 1.5em 2em;

}

pre.box--manual,

pre.box--automatic {

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABpUlEQVRYR+2V4TEEQRCF30VABi4DMkAGRIAIEAEiQASIgAyQARmQARFQ39XMVV/ruZnZq8KP7T9bdbvd883rfn0T/XFMVjh/XdJlyj+V9DGk1lCALUk3kngSL5KO0rOLYwjAXjocBWygABAPPQS9AFeSjisH8A0taYpWAG57L2mnqar0JGm/ZS5aAOjzoyQvOSxITjAPPmjJbm0uagAnZtLtAe+SmAWGjwCS3m8EINS4LilXAsgWOwwSn9Ph3nbkALEd5Nymufhh1QjAW8zWu5B0nn4o7QHenwUQoVU9QMlin5JQI1ustgeow63Xala1ACWLvSbJ31IxQNiA0R7AfhxMTBPwZqDG3KoAUIgpz1vNfn8niSGid8vmwubYfpPDYQcBxMyqAFDcS5Utlm+zbC6iAff9RrXQqgB8uQreYiXJS87Kv3Mx25LQqh7AWqxV8hqIb8mCVS2AtViv5DUI35K5VfMMWIsNlbwG4VsysyoA2CVbjCJ+JmqFe99b60+jTfibABoBhihQ+wuvtXAhfwQYFRgV+JcK9O72lb6vLZWVirckfwPf2XItb8PuCwAAAABJRU5ErkJggg==");

background-repeat: no-repeat;

background-size: 32px;

}

pre.box--manual {

background-position: top 1.5em right 2em;

}

pre.box--automatic {

background-position: top right;

background-origin: content-box;

}

/* Demo styles */

pre.box {

border: 4px solid #ccc;

border-radius: 0.15em;

margin: 1em auto;

}

body {

font: 125% / 1.45 sans-serif;

padding: 1em;

}

h1 {

font-size: 1.2em;

text-align: center;

}

pre > code {

display: block;

}

pre.box--manual {

border-color: tomato;

}

pre.box--automatic {

border-color: forestgreen;

}