Nếu bạn có thể sử dụng một tiền xử lý như SCSS:
(cập nhật để thực sự trả lời câu hỏi hỏi; cũng thấy live example)
// ----------- only things you need to edit { ---------------
$sprite-size: 16px; // standard sprite tile size
$sprite-padding: 0px; // if you have padding between tiles
// ----------- } only things you need to edit ---------------
// basic sprite properties (extension-only class)
%sprite {
width:$sprite-size; height:$sprite-size; // must restrict viewport, otherwise other sprites may "bleed through"
// could set shared standard tilesheet `background-image: url(...)`
// other standard styles, like `display:inline-block` or `position:absolute`
}
// helper for assigning positioning using friendlier numbers like "5" instead of doing the math
@mixin sprite-offset($xoffset:0, $yoffset:0, $increment:$sprite-size, $padding: $sprite-padding) {
background-position: -($xoffset*($increment + $padding)) -($yoffset*($increment + $padding));
}
Để "phao" một nền từ một sprite, như the answer by @jose-faeti cho biết bạn cần phải involve a placeholder element
<div class="float-bg">
<div class="bg"></div>
<p>Lorem ipsum dolor si...</p>
</div>
với phong cách như:
.float-bg .bg {
@extend %sprite; // apply sizing properties
background-image: url(...); // actually set the background tiles
@include sprite-offset(4);
// specific configuration per accepted answer
position:absolute;
top: 0;
right: 0;
}
Trong câu trả lời ban đầu của tôi, để create a list of buttons, bạn có thể:
// list out the styles names for each button
$buttons: 'help', 'font', 'layerup', 'layerdown', 'transform', 'export', 'save', 'clear', 'move-left', 'move-right', 'move-up', 'move-down', 'png', 'jpg', 'svg', 'funky';
.btns > * { @extend %sprite; background-image:... } // apply sizing properties, bg
// autoassigns positioning
@for $i from 1 through length($buttons) {
$btn: nth($buttons, $i);
.btn-#{$btn} {
// @extend .sprite;
@include sprite-offset($i - 1);
}
}
sau đó sẽ làm việc trên something like:
<ul class="btns">
<li class="btn-help">...</li>
<li class="btn-font">...</li>
<li class="btn-save">...</li>
<li class="btn-export">...</li>
<li class="btn-etc">...</li>
<li class="btn-etc">...</li>
</ul>
Vị trí điểm ảnh là chọn phần nào của sprite sẽ được chọn. Tuy nhiên, một phần của sprite sẽ chỉ xuất hiện ở góc trên cùng bên phải của div. Có cách nào mà điều này có thể được thực hiện bằng cách sử dụng sprites? –
Bạn có thể tạo một div nhỏ, có kích thước của sprite và cho nó hình nền như bạn thường làm. Sau đó, đặt div đó bên trong 200px * 200px div của bạn và cung cấp cho div sprite 'position: absolute; trên cùng: 0; bên phải: 0; '. Cha mẹ phải có 'vị trí: tương đối' hoặc' vị trí: tuyệt đối' quá, hoặc vị trí sẽ không hoạt động đúng. – GolezTrol
@MaximDsouza Sự cố của bạn đã được giải quyết chưa? – GolezTrol