How to call HTML code inside css?

Asked

Viewed 1,141 times

0

First of all, it is quite possible that there are already topics talking about this. It was not lack of research, I believe only that I did not find the correct keywords.

Self-explanatory question. I need a certain code to appear on the page, according to the class that was assigned to <div>.

As an example, it would look something like this:

    .a{
    <img src="caminho/imagem1.png" title="Imagem 1" >
    }
    .b{
    <img src="caminho/imagem2.png" title="Imagem 2" >
    }
    <div class="a"></div>
    <p>
    <div class="b"></div>

It is possible?

html css front-end

  • Why don’t you do this with jquery?

  • My friend, as far as I know this is not possible... usually to load images in CSS you will have to do as in this example here: background:#fafafa url('img/grey.png') repeat; in this example to upload an image to the background of a div!

  • Got confused your code and the question... You want if the class is ".to" a tag appears <img> within the <div> kind of: <div class="a"><img src="caminho/imagem1.png" title="Imagem 1" ></div> or you just want just that whenever you put the class ".to" to <div> keep a background image?

  • @hugocsl , was just an example. I want the class to insert an HMTL into the code.

  • @wpfan, but in this example I cannot assign Tittle

  • is not possible, because the css does not foresee it, but you can do so, leave the image without the attribute src, and with a "hack" on css with a dial: .a img { content:url('caminho/imagem1.png'); }

  • This class business assigning something to the body is usually created by a javascript or API that does it in real time in a dynamic way, as well as systems and will mask to input by attribute CLASS

  • 4

    css is style language, i.e., it stylizes an existing document (or pseudo-elements) and not programming, so there is no point in doing such an operation in CSS, it would be more logical to use display:none the elements and add them in the HTML body and according to the class or hover for example, they would be displayed.

  • 1

    I know it’s an old question, but it’s worth reading this from here.

Show 4 more comments

3 answers

2

First of all css only controls the look of html code, and it is not possible to inject snippets of code the way you are thinking.

Adding a visual element around a class is possible with CSS as follows:

.a:before {
  content: '';
  display: block;
  width: 300px;
  height: 300px;
  background-image: url(http://www.artemisia.org.br/images/projetosrealizados/(0)tetse.jpg);
}

but adding things dynamically in html also would not be an interesting output because when looking at the html code you do not know where the element is, where it comes from, and you end up leaving the very difficult thing in terms of keeping the project.

I would add the element you want inside your div and control the visibility of Child element from the Parent Hover.

-1

From what I understand, you want to select an element of your HTML and assign an image dynamically according to the class of its element CSS. I made an example using Jquery where I assign the image to the element containing the class a.

Obs: With CSS I believe it is not possible.

$(document).ready( ()=> {
    
    let img1 = "<img  src='http://www.artemisia.org.br/images/projetosrealizados/(0)tetse.jpg' title='exemplo titulo' alt='exemplo alt'  />"
  
   $('.a').html(img1);
})
<div class="a"></div>

<div class="b"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

-2

In this example of yours it is not possible to try this way:

<style>
    .a {
        width: 100px;
        background: #000 url("suaimagem.jpg" no-repeat);
    }
    .p {
        width:100px;
        background: #000 url("suaimagem.jpg" no-repeat);
    }
</style>
<div class="a"></div>
<div class="b"></div>

or within its div insert your image:

<div class="a">
    <img src="suaimagem.jpg" width:[tamanho desejado ou % ou px]/>
</div>
<div class="b">
    <img src="suaimagem.jpg" width:[tamanho desejado ou % ou px]/>
</div>

Browser other questions tagged html css front-end

You are not signed in. Login or sign up in order to post.