html없이 텍스트를 입력하십시오.

나는 HTML 파일을 편집 할 수있는 권한이 없으며 css와 js 만 편집 할 수 있습니다. 일부 이미지에 호버 효과를 사용하여 가운데 맞춤 텍스트가 튀어 나오도록하고 싶습니다. 이미지의 div 클래스를 알고 있지만 본문에 텍스트를 추가 할 수 없습니다. js 또는 css를 통해 어떻게 할 수 있습니까? 나는html없이 텍스트를 입력하십시오.

element.getElementsByClassName (클래스 명)

다음 CSS를 사용 같은 것을 사용 하는가? DevTools로에서 여기

<head> 
    <base href="/home/"> 
    <title>TITLE</title> 
    <meta name="description" content="BLA BLA BLA"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <meta name="site-id" content="19750"> 
    <meta name="site-path" content="/home"> 
    <meta name="site-update-url" content="https://node.sv-cdn.com/notifications"> 
    <link rel="icon" type="image/png" href="/favicon.png"> 

    <link rel="stylesheet" media="all" href="//smallvictories-production-assets.s3.amazonaws.com/assets/feed-23dad8deef60c63dc6e181346844e7439ba4f76c25ed84e0fb8bd63d3ce2023f.css"> 
    <link rel="stylesheet" href="./_sv_custom.css"> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script> 
    <!--[if lt IE 9]> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script> 
    <![endif]--> 
<style>html.turbolinks-progress-bar::before { 
    content: ''; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 2000; 
    background-color: #0076ff; 
    height: 3px; 
    opacity: 0.99; 
    width: 0%; 
    transition: width 300ms ease-out, opacity 150ms ease-in; 
    transform: translate3d(0,0,0); 
}</style><link rel="stylesheet" type="text/css" href="chrome-extension://onhiacboedfinnofagfgoaanfedhmfab/dist/contentStyles.css"></head> 
<body id="home" class="site-19750 page home home feed" data-no-turbolink=""> 
    <div class="sv-loader" id="sv-loader"><div class="sv-loader-loading"></div></div> 
    <div class="sv-theme"> 
    <div class="sv-feed"> 
    <div class="sv-feed-info" id="sv-feed-info" style="display: none;"> 
    <div class="sv-feed-info-inner"> 
     <h1 class="sv-feed-title sv-feed-info-title">WOLOBAN</h1> 
     <div class="sv-feed-description sv-feed-info-description"><p>BLA BLA BLA</p></div> 
    </div> 
    </div> 
    <a href="#sv-feed-info" class="sv-control sv-feed-control" data-sv-toggle="Info">Info</a> 
    <div class="sv-feed-inner"> 
    <div class="sv-feed-block"> 
     <div class="sv-feed-meta"> 
     <h1 class="sv-feed-title sv-feed-meta-title">WOLOBAN</h1> 
     </div> 
    </div> 
     <div class="sv-feed-item sv-feed-item-0 home 01photography jpg home01photographyjpg" id="svhome01photographyjpg"> 
    <div class="sv-feed-item-photo"> 
     <a target="_blank" href="/HOME/PHOTOGRAPHY"> 
      <img data-src="//aws.sv-cdn.com/site_assets/splash/3735baaa999/HOME/01-PHOTOGRAPHY.jpg" alt="01 PHOTOGRAPHY" class="lazyload lazy-loaded" src="//aws.sv-cdn.com/site_assets/splash/3735baaa999/HOME/01-PHOTOGRAPHY.jpg"> 
</a>  <div class="sv-feed-item-photo-caption"><p>Photography</p></div> 
    </div> 
</div> 
     <div class="sv-feed-item sv-feed-item-1 home 02video jpg home02videojpg" id="svhome02videojpg"> 
    <div class="sv-feed-item-photo"> 
     <a target="_blank" href="/HOME/VIDEO"> 
      <img data-src="//aws.sv-cdn.com/site_assets/splash/3755baaa999/HOME/02-VIDEO.jpg" alt="02 VIDEO" class="lazyload lazy-loaded" src="//aws.sv-cdn.com/site_assets/splash/3755baaa999/HOME/02-VIDEO.jpg"> 
</a>  <div class="sv-feed-item-photo-caption"><p>Video</p></div> 
    </div> 
</div> 
    </div> 
</div> 
    </div> 

    <script src="//smallvictories-production-assets.s3.amazonaws.com/assets/feed-786a3a45375601be731dc81462c9dcf2bba435942bb0dbe9cd6bef8dd17bc5b5.js"></script> 
    <script src="./_sv_custom.js"></script> 
<span id="sbmarwbthv5"></span><a style="display: none; " id="exifview-absolute-url-convert-proxy" href="dummy"></a></body>

SV-피드 항목 SV-피드 항목-0 홈 01photography의 JPG의 home01photographyjpg는 "ID는 ="svhome01photographyjpg 난에 호버 텍스트를 적용 할 사진입니다

출처

2017-09-22 wlbn

여기는 자바 스크립트입니다.

const imageContainer = document.querySelector('#svhome01photographyjpg'); 
imageContainer.appendChild('<div class="my-text-over-image">my text just here</div>')

과 CSS는 (당신은 당신의 텍스트를 포주 클래스에 속성을 추가 할 수 있습니다) :

#svhome01photographyjpg { 
    position: relative; 
    ... 
} 

.my-text-over-image { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 2; 
}

출처

2017-09-22 13:02:00 Kornflexx

가 감사를! 노력했지만 작동하지 않는 것 같습니다. – wlbn

전체 CSS가 없으면 나는 당신을 도울 수 없다. Z- 색인 값을 더 크게 만드십시오. – Kornflexx

기본 .css 파일에는 .sv-feed-item-photo 클래스 만 언급되며 ID는 없습니다. 다른 .css 나는 그러나 어떤 id를 #로 호출하면 편집 할 수 없다. 나는 수업 만 할 수있다. – wlbn

만 CSS 스타일 :

.sv-feed-item-photo > a:hover:before { 
    position: absolute; 
    font-size: 50px; 
    content: "This is the text!"; 
    color: #fff; 
}

출처

2017-09-22 13:06:33

두 항목의 내용이 같지만 확실히 작동합니다. 한 항목에 대한 텍스트와 두 번째 항목에 대한 텍스트를 어떻게 지정할 수 있습니까? 고맙습니다. – wlbn

@wlbn 'ntn-child (n)'또는 nth-of-type (n)을 사용할 수 있습니다. n - order의 요소 또는 구문 –

을 사용해 _sv-feed-item-photo : ntn -child (0) _ and _ # svhome01photographyjpg.sv-feed-item-photo_하지만 작동하지 않습니다. 코딩에 익숙하지 않아서 미안합니다. – wlbn

html없이 텍스트를 입력하십시오.

답변

관련 문제