Tôi muốn đặt hình nền cho div, theo cách nó nằm ở phía trên bên phải của div, nhưng với khoảng cách 10px cố định từ trên xuống và bên phải.Cách đặt vị trí nền thành khoảng cách tuyệt đối, bắt đầu từ phải không?
Sau đây là cách tôi sẽ làm điều đó nếu muốn có nó trong góc trên bên trái của div:
background: url(images/img06.gif) no-repeat 10px 10px;
Liệu có cách nào để đạt được kết quả tương tự, nhưng cho thấy nền trên QUYỀN trên?
Sử dụng các quy tắc đã đề cập trước cùng với một lề trên và bên phải:
background: url(images/img06.gif) no-repeat top right;
margin-top: 10px;
margin-right: 10px;
hình ảnh Bối cảnh chỉ xuất hiện trong vòng đệm, không lợi nhuận. Nếu thêm lợi nhuận không phải là một lựa chọn bạn có thể phải nghỉ mát để div khác, mặc dù tôi khuyên bạn chỉ nên sử dụng đó như là một phương sách cuối cùng để cố gắng và giữ cho đánh dấu của bạn như nạc và sementic càng tốt.
Tôi không biết nếu nó là có thể trong css tinh khiết, vì vậy bạn có thể thử
background: url(images/img06.gif) no-repeat top right;
và sửa đổi hình ảnh của bạn để kết hợp một biên giới 10px trên đầu và ngay trong một màu trong suốt
Tôi đang tìm kiếm một cách css thuần túy, nhưng nếu đó là cách duy nhất ... – bahadorn
Có một vài cách bạn có thể làm điều này.
Tự mình làm toán, nếu có thể. Bạn đã biết kích thước của hình ảnh của mình. Nếu bạn biết kích thước của div, bạn chỉ có thể đặt hình ảnh ở (chiều rộng div - chiều rộng hình ảnh - 10, chiều cao div - chiều cao hình ảnh - 10).
Sử dụng Javascript để thực hiện việc nâng hạng nặng cho bạn. Khá nhiều phương pháp tương tự như trên, ngoại trừ bạn không cần phải biết kích thước của div chính nó. Javascript có thể cho bạn biết.
Một cách hackish khác sẽ là đặt đường viền trong suốt 10px xung quanh đầu và bên phải của hình ảnh của bạn và đặt vị trí thành top right.
Một giải pháp là hoàn toàn đặt vị trí trống div và đặt nền đó. Tôi không tin rằng có một cách để làm điều đó hoàn toàn với CSS, không có thay đổi hình ảnh, và không có đánh dấu thêm trong một bố trí chất lỏng.
Bạn có thể sử dụng tỷ lệ:
background: url(...) top 98% no-repeat;
Nếu bạn biết chiều rộng của div cha mẹ nó nên được khá dễ dàng để xác định bao nhiêu phần trăm bạn cần sử dụng.
Tôi rất ngạc nhiên khi biết rằng 100% giống như 'đúng' cho hình nền, tuy nhiên nếu chiều rộng của div gốc được cố định, thì chính xác hơn là trực tiếp sử dụng bù đắp pixel. – EoghanM
không có tỷ lệ phần trăm sẽ không hoạt động nếu bạn có độ rộng khác nhau cho itmes –
Định dạng đúng là:
background: url(YourUrl) 0px -50px no-repeat;
đâu 0px là vị trí nằm ngang và -50px là vị trí thẳng đứng.
CSS background-position chấp nhận giá trị âm.
Trong Firefox, IE9 và Opera 10.5 bạn có thể sử dụng cú pháp bốn-giá trị, specified in CSS3:
background-position: right 10px top 10px;
Nguồn: MDN
Bạn có thể giả mạo không gian ở phía bên tay phải có viền bằng pixel (trắng phần lớn thời gian hoặc có thể một cái gì đó else)
background-image: url(../images/calender.svg) center right
border-right: 5px white solid
Đây là một giải pháp tốt, nhưng kể từ khi tôi muốn hiển thị biên giới này sẽ có yêu cầu gói div phi ngữ nghĩa . Tôi đã kết thúc bằng cách sử dụng một thẻ![]()
thay vì nền css và cuối cùng cũng hoạt động tốt cho tôi. –
doub1ejack
Trong trường hợp của tôi, tôi thấy 'padding-top' và' padding-right' là giải pháp để định vị một biểu tượng nhỏ sau một khoảng thời gian. –
Điều này có thể hiệu quả nhưng có tác dụng phụ khác. Màu nền sẽ không bao trùm toàn bộ phần tử, bạn cũng không thể có văn bản trong phần tử lấp đầy 10px cuối cùng. –