html 我如何把一个标题元素放在一个SVG背景之上

zpgglvta  于 2023-06-20  发布在  其他
关注(0)|答案(2)|浏览(87)

我试图把我的头元素到我的svg背景，同时仍然有身临其境的svg背景运行，但它不会工作。有没有一种方法可以将header元素放在svg背景的中心，同时仍然保持/使用沉浸式背景和类“box_shadow_header”？

section {
        position: relative;
        width: 100%;
        height: 100vh;
        background:  #28407D;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    section .row {
        position: relative;
        width: 100%;
        display: flex;
        padding: 10px 0;
        white-space: normal;
        font-size: 64px;
    }
    svg:hover {
        transition: 0s;
        color: #B09B45;
        text-shadow: 0 120px 120px #B09B45;
    }
    svg {
        color: #3450B6;
        transition: 1s;
        padding: 0 5px;
        user-select: none;
        cursor: default; 
    }
    

    /* Style rules for header content*/
    header {
        text-align: center;
        font-size: 3em;
        color: white;
    }

    header h1 {
        font-family: 'Bagel Fat One', cursive;
        font-family: 'Tilt Prism', cursive;
        font-weight: bold;
    }
    header h3 {
        font-family: 'Bagel Fat One', cursive;
        font-family: 'Tilt Prism', cursive;
        font-weight: bold;
        font-style: italic;
    }
    .box_shadow_header {
        background-color: #28407D;
        color: white;
        padding: 10px;
        margin: 1px 1px 1px 1px;
        border-radius: 4px;
        box-shadow: 2px 2px 20px 23px #3450B6;
    }
<section>
       <header class="box_shadow_header">
        <h1>Brew City</h1>
        <h3>Brew. Share. Drink Responsibly.</h3>
    </header>
        <div id= "row" >
            <div>
                <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 2048 2048"><path fill="currentColor" d="M1600 512q66 0 124 25t101 69t69 102t26 124v512q0 66-25 124t-69 102t-102 69t-124 25h-64v192q0 40-15 75t-41 61t-61 41t-75 15H320q-40 0-75-15t-61-41t-41-61t-15-75V477q-59-34-93-93T0 256q0-52 20-99t54-81t81-55t99-21h1154q53 0 99 20t82 55t55 81t20 100q0 35-9 69t-26 64t-41 56t-52 43v24h64zM255 128q-26 0-49 10t-41 27t-27 41t-10 50q0 40 23 73t62 47l43 15v569q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15q40 0 75 15t61 41t41 61t15 75v256q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15h371q33-16 55-52t22-76q0-27-10-50t-27-40t-41-28t-50-10H255zm1153 1728v-76q-15 5-31 8t-33 4H320q-17 0-33-3t-31-9v76q0 26 19 45t45 19h1024q26 0 45-19t19-45zm-64-192q26 0 45-19t19-45V512h-320q-26 0-45 19t-19 45v256q0 40-15 75t-41 61t-61 41t-75 15q-40 0-75-15t-61-41t-41-61t-15-75V576q0-26-19-45t-45-19q-26 0-45 19t-19 45v384q0 40-15 75t-41 61t-61 41t-75 15q-33 0-64-11v459q0 26 19 45t45 19h192v-448q0-27 19-45t45-19q26 0 45 18t19 46v448h384v-576q0-27 19-45t45-19q26 0 45 18t19 46v576h192zm448-320V832q0-40-15-75t-41-61t-61-41t-75-15h-64v896h64q40 0 75-15t61-41t41-61t15-75z"/></svg>
            </div>
        </div>
</section>
Html

2条答案

按热度按时间
55ooxyrt

55ooxyrt1#

下面是我使用CSS Grid的两个例子。我不确定它应该是什么样子，但原则上我使用以下方法：
示例1：h1、h3和SVG放置在网格中各自的单元格中。唯一控制元素之间间距的是h1和h3上的边距。你也可以不使用网格，但是网格可以对元素进行排序。
示例2：h1和SVG放在同一个单元格中，并使用z索引进行排序。为了使悬停在SVG上工作，h1上的pointer-events属性为none。

section {
  background: #28407D;
}

svg:hover {
  transition: 0s;
  color: #B09B45;
  text-shadow: 0 120px 120px #B09B45;
}

svg {
  color: #3450B6;
  transition: 1s;
  padding: 0 5px;
  user-select: none;
  cursor: default;
  grid-row: 2;
  grid-column: 1;
  place-self: center;
}

/* Style rules for header content*/

header {
  display: grid;
  text-align: center;
  font-size: 3em;
  color: white;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr;
}

header h1 {
  font-family: 'Bagel Fat One', 'Tilt Prism', cursive;
  font-weight: bold;
  margin: .5em 0 0 0;
  grid-row: 1;
  grid-column: 1;
}

header h3 {
  font-family: 'Bagel Fat One', 'Tilt Prism', cursive;
  font-weight: bold;
  font-style: italic;
  margin: .2em 0 .5em 0;
  grid-row: 3;
  grid-column: 1;
}

.box_shadow_header {
  background-color: #28407D;
  color: white;
  padding: 10px;
  margin: 1px 1px 1px 1px;
  border-radius: 4px;
  box-shadow: 2px 2px 20px 23px #3450B6;
}
<section>
  <header class="box_shadow_header">
    <h1>Brew City</h1>
    <h3>Brew. Share. Drink Responsibly.</h3>
    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 2048 2048"><path fill="currentColor" d="M1600 512q66 0 124 25t101 69t69 102t26 124v512q0 66-25 124t-69 102t-102 69t-124 25h-64v192q0 40-15 75t-41 61t-61 41t-75 15H320q-40 0-75-15t-61-41t-41-61t-15-75V477q-59-34-93-93T0 256q0-52 20-99t54-81t81-55t99-21h1154q53 0 99 20t82 55t55 81t20 100q0 35-9 69t-26 64t-41 56t-52 43v24h64zM255 128q-26 0-49 10t-41 27t-27 41t-10 50q0 40 23 73t62 47l43 15v569q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15q40 0 75 15t61 41t41 61t15 75v256q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15h371q33-16 55-52t22-76q0-27-10-50t-27-40t-41-28t-50-10H255zm1153 1728v-76q-15 5-31 8t-33 4H320q-17 0-33-3t-31-9v76q0 26 19 45t45 19h1024q26 0 45-19t19-45zm-64-192q26 0 45-19t19-45V512h-320q-26 0-45 19t-19 45v256q0 40-15 75t-41 61t-61 41t-75 15q-40 0-75-15t-61-41t-41-61t-15-75V576q0-26-19-45t-45-19q-26 0-45 19t-19 45v384q0 40-15 75t-41 61t-61 41t-75 15q-33 0-64-11v459q0 26 19 45t45 19h192v-448q0-27 19-45t45-19q26 0 45 18t19 46v448h384v-576q0-27 19-45t45-19q26 0 45 18t19 46v576h192zm448-320V832q0-40-15-75t-41-61t-61-41t-75-15h-64v896h64q40 0 75-15t61-41t41-61t15-75z"/></svg>
  </header>
</section>
section {
  background: #28407D;
}

svg:hover {
  transition: 0s;
  color: #B09B45;
  text-shadow: 0 120px 120px #B09B45;
}

svg {
  color: #3450B6;
  transition: 1s;
  padding: 0 5px;
  user-select: none;
  cursor: default;
  grid-row: 1;
  grid-column: 1;
  place-self: center;
  z-index: 1;
}

/* Style rules for header content*/

header {
  display: grid;
  text-align: center;
  font-size: 3em;
  color: white;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
}

header h1 {
  font-family: 'Bagel Fat One', 'Tilt Prism', cursive;
  font-weight: bold;
  grid-row: 1;
  grid-column: 1;
  z-index: 2;
  pointer-events: none;
}

header h3 {
  font-family: 'Bagel Fat One', 'Tilt Prism', cursive;
  font-weight: bold;
  font-style: italic;
  margin: 0 0 .5em 0;
  grid-row: 2;
  grid-column: 1;
}

.box_shadow_header {
  background-color: #28407D;
  color: white;
  padding: 10px;
  margin: 1px 1px 1px 1px;
  border-radius: 4px;
  box-shadow: 2px 2px 20px 23px #3450B6;
}
<section>
  <header class="box_shadow_header">
    <h1>Brew City</h1>
    <h3>Brew. Share. Drink Responsibly.</h3>
    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 2048 2048"><path fill="currentColor" d="M1600 512q66 0 124 25t101 69t69 102t26 124v512q0 66-25 124t-69 102t-102 69t-124 25h-64v192q0 40-15 75t-41 61t-61 41t-75 15H320q-40 0-75-15t-61-41t-41-61t-15-75V477q-59-34-93-93T0 256q0-52 20-99t54-81t81-55t99-21h1154q53 0 99 20t82 55t55 81t20 100q0 35-9 69t-26 64t-41 56t-52 43v24h64zM255 128q-26 0-49 10t-41 27t-27 41t-10 50q0 40 23 73t62 47l43 15v569q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15q40 0 75 15t61 41t41 61t15 75v256q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15h371q33-16 55-52t22-76q0-27-10-50t-27-40t-41-28t-50-10H255zm1153 1728v-76q-15 5-31 8t-33 4H320q-17 0-33-3t-31-9v76q0 26 19 45t45 19h1024q26 0 45-19t19-45zm-64-192q26 0 45-19t19-45V512h-320q-26 0-45 19t-19 45v256q0 40-15 75t-41 61t-61 41t-75 15q-40 0-75-15t-61-41t-41-61t-15-75V576q0-26-19-45t-45-19q-26 0-45 19t-19 45v384q0 40-15 75t-41 61t-61 41t-75 15q-33 0-64-11v459q0 26 19 45t45 19h192v-448q0-27 19-45t45-19q26 0 45 18t19 46v448h384v-576q0-27 19-45t45-19q26 0 45 18t19 46v576h192zm448-320V832q0-40-15-75t-41-61t-61-41t-75-15h-64v896h64q40 0 75-15t61-41t41-61t15-75z"/></svg>
  </header>
</section>
赞(0）分享  回复(0）举报  2023-06-20
dxpyg8gm

dxpyg8gm2#

你的标题***是***居中的，但品脱不是，所以我假设你的意思是品脱！
我只是简单地添加了文本居中到品脱的容器和删除死（不必要的）DIV像这样…

#row {text-align:center;}

<div id= "row">
           
 <svg width="64" height="64" viewBox="0 0 2048 2048"><path fill="currentColor" d="M1600 512q66 0 124 25t101 69t69 102t26 124v512q0 66-25 124t-69 102t-102 69t-124 25h-64v192q0 40-15 75t-41 61t-61 41t-75 15H320q-40 0-75-15t-61-41t-41-61t-15-75V477q-59-34-93-93T0 256q0-52 20-99t54-81t81-55t99-21h1154q53 0 99 20t82 55t55 81t20 100q0 35-9 69t-26 64t-41 56t-52 43v24h64zM255 128q-26 0-49 10t-41 27t-27 41t-10 50q0 40 23 73t62 47l43 15v569q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15q40 0 75 15t61 41t41 61t15 75v256q0 26 19 45t45 19q26 0 45-19t19-45V576q0-40 15-75t41-61t61-41t75-15h371q33-16 55-52t22-76q0-27-10-50t-27-40t-41-28t-50-10H255zm1153 1728v-76q-15 5-31 8t-33 4H320q-17 0-33-3t-31-9v76q0 26 19 45t45 19h1024q26 0 45-19t19-45zm-64-192q26 0 45-19t19-45V512h-320q-26 0-45 19t-19 45v256q0 40-15 75t-41 61t-61 41t-75 15q-40 0-75-15t-61-41t-41-61t-15-75V576q0-26-19-45t-45-19q-26 0-45 19t-19 45v384q0 40-15 75t-41 61t-61 41t-75 15q-33 0-64-11v459q0 26 19 45t45 19h192v-448q0-27 19-45t45-19q26 0 45 18t19 46v448h384v-576q0-27 19-45t45-19q26 0 45 18t19 46v576h192zm448-320V832q0-40-15-75t-41-61t-61-41t-75-15h-64v896h64q40 0 75-15t61-41t41-61t15-75z"/></svg>
         
</div>
赞(0）分享  回复(0）举报  2023-06-20
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com