如何在CSS设计的条形图中定位图像

huangapple
go评论75阅读模式
英文:

How to position an image in a CSS designed Bar graph

问题

我正在创建一个柱状图，并希望能够在每个柱子内部放置图像，而不改变柱子的大小。我已经找到了一种通过文本实现这一点的方法，但无法用图像实现相同的效果。这是否可能？或者将图像放在柱子的左边，就像传统的柱状图一样，会更灵活吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>SF6</title>
</head>
<body>
    <main>
        <section id="tall">
            <article class="tall">
                <div>
                    <p>Sages <img src="./badge/some_stuff_for_richard5.png" height="50"><span></span><span class="tall"></span></p>
                </div>
            </article>
            <article class="tall">
                <div>
                    <p>prophet<span></span><span class="tall"></span></p>
                </div>
            </article>
            <article class="tall">
                <div>
                    <p>renegade<span></span><span class="tall"></span></p>
                </div>
            </article>
        </section>
    </main>
</body>
</html>

html {
    font-size: 100%;
    font-family: sans-serif;
}

body {
    background-color: #1a1a2e;
}

html,
body,
main {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

main {
    overflow: hidden;
    position: relative;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

section {
    background: #1a1a2e;
}

section article.tall {
    width: 500px;
    height: auto;
}

section article.tall p {
    color: #ffffff;
    padding: 10px;
    position: relative;
    box-sizing: border-box;
    z-index: 2;
    overflow: hidden;
}

section article.tall p img {
    color: #ffffff;
    padding: 10px;
    position: relative;
    box-sizing: border-box;
    z-index: 2;
    overflow: hidden;
}

section article.tall div span:nth-child(1) {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background: #0f3460;
    z-index: -2;
    height: 100%;
    width: 100%;
}

section article.tall div span:nth-child(2) {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background: rgb(94, 227, 255);
    background: linear-gradient(90deg, rgba(94, 227, 255, 1) 0%, rgba(11, 113, 230, 1) 100%);
    z-index: -1;
    height: 100%;
    width: 100%;
}

如何在CSS设计的条形图中定位图像

英文:

I am creating a bar graph and i want to be able to position the image inside each bar without altering the bars size. I have found a way to implement this through text but i can not do the same with an image. Is this possible? Or would it be more flexible if i put the image to the left of the bar instead like a traditional bar graph?.

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
&lt;title&gt;SF6&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;main&gt;
&lt;section id=&quot;tall&quot;&gt;
&lt;article class=&quot;tall&quot;&gt;
&lt;div&gt;
&lt;p&gt;Sages &lt;img src =&quot;./badge/some_stuff_for_richard5.png&quot; height=&quot;50&quot; &gt;&lt;span&gt;&lt;/span&gt;&lt;span class=&quot;tall&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;article class=&quot;tall&quot;&gt;
&lt;div&gt;
&lt;p&gt;prophet&lt;span&gt;&lt;/span&gt;&lt;span class=&quot;tall&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;article class=&quot;tall&quot;&gt;
&lt;div&gt;
&lt;p&gt;renegade&lt;span&gt;&lt;/span&gt;&lt;span class=&quot;tall&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/article&gt;
&lt;/section&gt;
&lt;/main&gt;
&lt;/body&gt;
&lt;/html&gt;
html{
font-size: 100%;
font-family: sans-serif;
}
body{
background-color: #1a1a2e ;
}
html,
body,
main{
padding: 0;
margin: 0;
box-sizing: border-box;
}
main{
overflow: hidden;
position: relative;
height: 100vh;
width: 100vw;
display: flex;
justify-content:center ;
align-items: center;
}
section{
background: #1a1a2e
}
section article.tall{
width: 500px;
height: auto;
}
section article.tall p {
color:#ffffff;
padding: 10px;
position:relative;
box-sizing: border-box;
z-index: 2;
overflow: hidden;
}
section article.tall p img{
color:#ffffff;
padding: 10px;
position:relative;
box-sizing: border-box;
z-index: 2;
overflow: hidden;
}
section article.tall div span:nth-child(1){
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin:auto;
background: #0f3460;
z-index: -2;
height: 100%;
width: 100%;
}
section article.tall div span:nth-child(2){
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin:auto;
background: rgb(94,227,255);
background: linear-gradient(90deg, rgba(94,227,255,1) 0%, rgba(11,113,230,1) 100%);
z-index: -1;
height: 100%;
width: 100%;
}

如何在CSS设计的条形图中定位图像

答案1

得分: 1

你可以使用Flex并进行一些更改来实现你想要的效果，但我不太明白你的需求，所以我根据你的问题写出了我理解的内容。

<main>
    <section id="tall">
        <article class="tall">
            <div>
                <p>Sages <img src="./badge/some_stuff_for_richard5.png" style="margin-left: 10px;"><span></span><span class="tall"></span></p>
            </div>
        </article>
        <article class="tall">
            <div>
                <p><img src="./badge/some_stuff_for_richard5.png" style="margin-right: 10px;">prophet<span></span><span class="tall"></span></p>
            </div>
        </article>
        <article class="tall">
            <div>
                <p>renegade<img src="./badge/some_stuff_for_richard5.png" style="margin-left: 10px;"><span></span><span class="tall"></span></p>
            </div>
        </article>
    </section>
</main>

html{
    font-size: 100%;
    font-family: sans-serif;
}
body{
    background-color: #1a1a2e ;
}
html,
body,
main{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
main{
    overflow: hidden;
    position: relative;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content:center ;
    align-items: center;
}

section{
    background: #1a1a2e
}
section article.tall{
    width: 500px;
    height: auto;
}
section article.tall p {
    display: flex;
    align-items: center;
    color:#ffffff;
    padding: 10px;
    position:relative;
    box-sizing: border-box;
    z-index: 2;
    overflow: hidden;
    height: 38px;
}
section article.tall p img{
    display: block;
    color:#ffffff;
    position:relative;
    box-sizing: border-box;
    z-index: 2;
    overflow: hidden;
    height: 30px;
}

section article.tall div span:nth-child(1){
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin:auto;
    background: #0f3460;
    z-index: -2;
    height: 100%;
    width: 100%;
}
section article.tall div span:nth-child(2){
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin:auto;
    background: rgb(94,227,255);
    background: linear-gradient(90deg, rgba(94,227,255,1) 0%, rgba(11,113,230,1) 100%);
    z-index: -1;
    height: 100%;
    width: 100%;
}

有关Flex和align-items的信息...

如何在CSS设计的条形图中定位图像

英文:

You can use Flex and get what you want with some changes, but I didn't understand what you wanted, so I wrote what I got from your question.

 &lt;main&gt;
&lt;section id=&quot;tall&quot;&gt;
&lt;article class=&quot;tall&quot;&gt;
&lt;div&gt;
&lt;p&gt;Sages &lt;img src =&quot;./badge/some_stuff_for_richard5.png&quot; style=&quot;margin-left: 10px;&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;span class=&quot;tall&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;article class=&quot;tall&quot;&gt;
&lt;div&gt;
&lt;p&gt;&lt;img src =&quot;./badge/some_stuff_for_richard5.png&quot; style=&quot;margin-right: 10px;&quot;&gt;prophet&lt;span&gt;&lt;/span&gt;&lt;span class=&quot;tall&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;article class=&quot;tall&quot;&gt;
&lt;div&gt;
&lt;p&gt;renegade&lt;img src =&quot;./badge/some_stuff_for_richard5.png&quot; style=&quot;margin-left: 10px;&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;span class=&quot;tall&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/article&gt;
&lt;/section&gt;
&lt;/main&gt;

html{
font-size: 100%;
font-family: sans-serif;
}
body{
background-color: #1a1a2e ;
}
html,
body,
main{
padding: 0;
margin: 0;
box-sizing: border-box;
}
main{
overflow: hidden;
position: relative;
height: 100vh;
width: 100vw;
display: flex;
justify-content:center ;
align-items: center;
}
section{
background: #1a1a2e
}
section article.tall{
width: 500px;
height: auto;
}
section article.tall p {
display: flex;
align-items: center;
color:#ffffff;
padding: 10px;
position:relative;
box-sizing: border-box;
z-index: 2;
overflow: hidden;
height: 38px;
}
section article.tall p img{
display: block;
color:#ffffff;
position:relative;
box-sizing: border-box;
z-index: 2;
overflow: hidden;
height: 30px;
}
section article.tall div span:nth-child(1){
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin:auto;
background: #0f3460;
z-index: -2;
height: 100%;
width: 100%;
}
section article.tall div span:nth-child(2){
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin:auto;
background: rgb(94,227,255);
background: linear-gradient(90deg, rgba(94,227,255,1) 0%, rgba(11,113,230,1) 100%);
z-index: -1;
height: 100%;
width: 100%;
}

About flex and align-items...

如何在CSS设计的条形图中定位图像

huangapple
  • 本文由 发表于 2023年6月2日 07:45:54
  • 转载请务必保留本文链接：https://go.coder-hub.com/76386363.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定