배경 텍스트 사이의 배경색 배경 이미지

텍스트 블록이 있으며 블록의 배경색과 블록의 배경 이미지 아래에 있어야합니다. 여러 블록을 만들고 그 블록을 z-index 개 만들 수 있다는 것을 알고 있습니다. 나는 코드를 가능한 깨끗하게 유지하고 불필요한 것들을 가지고 싶지 않다.배경 텍스트 사이의 배경색 배경 이미지

나는 대답이 "아니오"라고 생각하지만 어쩌면 너희들이 내가하는 일을 알 수있을 것이다. (어쩌면 멋지는 새로운 배경 속성이나 자바 스크립트 기능).

HTML 코드 :

<section role="main" id="content"> 
    <h1 class="pageheading">Home Page</h1> 
</section>

CSS 코드 : 약자로 분명히

#content { 
    background-color:#69583b; 
    background-image:url(tattoo-256x256.png); 
    background-position:center bottom; 
    background-repeat:no-repeat; 
}

, 텍스트 "홈 페이지"이미지의 상단에 앉아있다.

논리적인 생각은 단순히 <img>과 position:absolute을 사용하는 것이지만 내 의도는 아닙니다. 나는 그것이 여러 가지 방법으로 이루어질 수 있음을 안다. 나는 내가 이걸 할 수 있는지 알아 내려고 노력하고있다.

출처

2014-12-10 doubleJ

_ "나는 텍스트 블록을 가지고 있고 그것은 블록의 배경 이미지 블록의 배경 색상 위와 아래가되고 싶어요."_ 당신에게 첫 문장에서 나를 잃어 버렸다. 텍스트가 이미지 아래에 어떻게있을 수 있습니까? – j08691

텍스트가 bg 상단에 머물러 있습니다. 무엇을 말하고 싶습니까? 텍스트가 bg 아래에 있어야한다고 말하면 bg보다 -1 인덱스를 사용하십시오. –

CSS 의사 클래스로 할 수 있습니다. (난 그냥 데모의 일환으로 불투명도에 추가 한) :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<style> 

#content { 
    background-color:#69583b; 
    background-position:center bottom; 
    background-repeat:no-repeat; 
    position: relative; 
} 

#content::after { 
    content: ""; 
    position: absolute; 
    z-index: 2; 
    width: 100%; 
    top: 0; bottom: 0; left: 0; right: 0; 
    background: url(http://placehold.it/256x256); 
    opacity: 0.8; 
} 

</style> 
</head> 
<body> 

<section role="main" id="content"> 
    <h1 class="pageheading">Home Page</h1> 
</section> 

</body> 
</html>

출처

2014-12-10 22:11:20

#content :: before는 같은 방식으로 작동해야한다고 생각했습니다. – Banzay

실제로. 어느 쪽이든 괜찮습니다. –

나는':: after'와':: before'에 대해 알고 있었지만 (과거에는 사용 해왔다.), 잊어 버렸다. 그것은 완벽하게 작동했습니다. 어떤 이유로 'background-repeat'이 사용되지 않았습니다. 나는 그것을 '#content :: after'으로 옮겨야했습니다. 이제 이미지의 인스턴스가 하나만 있으며 텍스트 상단에 있습니다. – doubleJ

배경 텍스트 사이의 배경색 배경 이미지

답변

관련 문제