테두리 CSS HTML에 텍스트 삽입
마이애미베이스
배경 이미지가 뒤에있는 안쪽 테두리 (둘 다 가운데)의 위쪽과 아래쪽에 텍스트를 삽입해야합니다. 이것은 각 페이지에서 동일합니다. CSS를 사용하여이 작업을 수행 할 수 있습니까?
내가 의미하는 바의 스크린 샷을 참조하십시오.
테두리는 너비가 3px이고 색상이 흰색이어야하며 글꼴은 Basis Grotesque Medium입니다.
WordPress 테마로 시작하여 편집하고 싶습니다.
바라건대이 질문에 대한 답변이 이전에 없었기를 바랍니다. 검색을 시도했지만 필요한 것을 찾을 수 없습니다.
이 웹 사이트 구축을 시작하기 전에 이것이 가능한지 그리고 어떻게 달성 할 수 있는지 알려 주시겠습니까?
웹 티키
여기에 설명 된 방법을 사용할 수 있습니다. 텍스트 아래의 줄 구분 기호와 제목의 왼쪽 / 오른쪽 줄에 대한 투명한 배경 .
그런 다음 음의 위쪽 / 아래쪽 여백을 사용하여 아래쪽 및 위쪽 테두리에 배치 할 수 있습니다.
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
body {
background-image: url(http://fr.playstation.com/media/5ZfqPjVF/BigSkyInfinity_Hero_EN.JPG);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Open Sans', sans-serif;
color:#fff;
}
#content{
border:3px solid #fff;
border-width:0 3px;
display:inline-block;
margin:50px 0;
width:100%;
}
.divider {
font-size:30px;
margin: -0.65em auto -0.45em;
overflow: hidden;
text-align: center;
line-height: 1.2em;
}
.divider:before,
.divider:after {
content: "";
vertical-align: top;
display: inline-block;
width: 50%;
height: 0.65em;
border-bottom: 3px solid #fff;
margin: 0 2% 0 -55%;
}
.divider:after {
margin: 0 -55% 0 2%;
}
p{margin: 150px 0;}<div id="content">
<h1 class="divider">Top title</h1>
<p>...Content here...</p>
<h2 class="divider">Bottom title</h2>
</div>위쪽 / 아래쪽 음의 여백은 사용중인 글꼴 모음에 따라 조정해야합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
텍스트가 테두리 밖에 있으면 CSS 및 HTML을 숨 깁니다.
- 2
HTML && CSS 입력 테두리 이동
- 3
CSS에서 작동하지 않는 텍스트 영역 테두리
- 4
쿼리 텍스트에 백 스페이스 키 삽입?
- 5
jquery에 텍스트 삽입
- 6
HTML / CSS : 텍스트 테두리를 이미지에 맞추려면 어떻게합니까?
- 7
HTML 편집기에 텍스트 삽입
- 8
InAppWebView-HTML에 텍스트 삽입
- 9
d3의 트리 링크에 텍스트 삽입
- 10
파일에서 두 번째 단어 앞에 텍스트 삽입
- 11
CSS에서 테두리 상자를 사용하는 동안 상자 중앙에 텍스트를 넣는 방법은 무엇입니까?
- 12
두 이미지 사이에 텍스트 삽입
- 13
두 날짜 변수 사이에 텍스트 삽입
- 14
knockoutJs CSS 바인딩에 초점을 맞출 때 텍스트 영역 테두리 (윤곽선)를 제거하는 방법은 무엇입니까?
- 15
텍스트 파일의 데이터를 테이블에 삽입
- 16
텍스트 상자에 테이블 값 삽입
- 17
Oracle 테이블에 텍스트 파일 내용 삽입 시도
- 18
테두리에 텍스트 추가
- 19
커서 위치에 미리 정의 된 텍스트 삽입
- 20
SQL SELECT 쿼리 행에 텍스트 삽입
- 21
CSS Html 안에 오버레이 div가있는 5div 아래에 텍스트 삽입
- 22
레이블 텍스트 및 입력 테두리에 대한 유효성 검사
- 23
텍스트에 테두리를 추가하는 방법은 무엇입니까?
- 24
HTML / CSS에서이 테두리 스타일을 만드는 방법은 무엇입니까?
- 25
HTML CSS 인쇄-페이지 나누기 앞에 "계속 ..."텍스트 삽입 (자동)
- 26
HTML / CSS로만 이전에 사용 된 텍스트를 동적으로 삽입 하시겠습니까?
- 27
CSS (또는 scss / sass)의 텍스트에 그라디언트 테두리를 추가하는 방법
- 28
CSS로 텍스트를 보유하는 원 / 디스크 주위에 테두리 배치
- 29
HTML 표의 텍스트에서 시작 테두리
몇 마디 만하겠습니다