문제
배경 이미지가있는 테이블 주위에 테두리를두고 싶었습니다. 테두리는 잘 작동하지만, 내가 이것을 할 때 (8px 테두리) 배경 이미지가 테두리에서 잘린다. 배경 이미지를 전환하여 8px를 오른쪽으로 시작하고 8px 아래로 내려갈 수 있습니까?
해결책
배경 위치를 사용할 수 있습니다.
background-position: 8px 8px;
다른 팁
짧은 손을 사용할 수도 있습니다.
background: <colour> <image url> <repeat> <left> <top> <scroll>
당신을 위해 나는 다음과 같은 생각을 할 것입니다.
background : transparent url(<location to img>) no-repeat 8px 8px scroll;
이미지를 수동으로 이동시키는 대신 8px
, 이미지를 패딩 박스에 고정해야합니다 (초록 테두리 박스 대신 아래 다이어그램에서) (노란색). 이렇게하면 이미지의 왼쪽 상단 모서리가 테두리 뒤에있는 대신 테두리 안에 배치됩니다.
background-origin: padding-box;
테두리 너비를 변경하더라도 유지 보수는 여전히 작동하기 때문에 유지 보수가 더 쉬워집니다.
배경 원점을 콘텐츠 상자에 설정할 수도 있습니다 (푸른):
background-origin: content-box;
제휴하지 않습니다 StackOverflow