이전 기사에서는 background-origin 속성을 사용하여 요소의 배경 이미지를 배치하는 방법을 배웠습니다. "CSS에서 원점을 기준으로 배경 이미지를 배치하는 한 가지 트릭"을 참조하세요. 이번에는 요소의 배경 이미지 위치를 지정하는 방법에 대해 알아보겠습니다. 필요한 경우 참고하시면 됩니다.
이전 글에서 소개할 샤오리지의 속성이 아직도 기억나시는지 모르겠네요. 지난 글에서는 background-origin 속성을 주로 소개했기 때문에 오늘은 background-position 속성에 대해 집중적으로 다루지 않았습니다.
먼저 작은 밤부터 살펴보겠습니다.
<style> div{ background-image: url("images/3.jpg"); background-repeat:no-repeat; background-position:left; } </style> </head> <body><div> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> <p>为了显示,表明这个一个p元素</p> </div> </body>
이 작은 예의 결과는
" background-position:left;
" 효과를 취소하면 원래 아래에 있었음을 알 수 있습니다. 배경이미지가 갑자기 위로 올라갔습니다. "배경 위치:왼쪽;
" 효과를 선택하면 배경 이미지가 원래 위치로 돌아갑니다. background-position 속성이 배경 이미지를 이동시키는 핵심인 것 같으니 이 속성을 살펴보도록 하겠습니다. background-position:left;
”的效果取消掉的时候,可以发现原来在下方的背景图一下子就跑到顶部了。将“background-position:left;
”的效果勾选上的时候,这个背景图又跑回原位置了。看来background-position这个属性才是背景图移动的关键啊,那就看看这个属性吧。
background-position属性设置背景图像的起始位置。这个属性设置背景原图像(由background-image
Background-image
로 정의됨)의 위치를 설정합니다. 배경 이미지가 반복되는 경우 이 지점부터 시작됩니다.
이 속성에는 많은 속성 값이 있습니다. 여러분의 편의를 위해 차트만 게시하겠습니다.
추천 학습: css 비디오 튜토리얼
🎜위 내용은 CSS 위치 지정 요소의 배경 이미지를 수정하는 한 가지 트릭의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!