Visualizzazione dei risultati da 1 a 4 su 4
  1. #1

    SVG come background centrato

    ciao!

    sto cercando di impostare un svg centrato come background.
    in pratica devo modificare l'accordion button di bootstrap 5.
    ho fatto cosi:
    codice:
    .accordion-button::after {
      background-color: #52B377;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      text-align: center;
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
    }
    il problema è che la freccia interna, l'svg quindi, non risulta centrato.
    ne orizzontalmente ne verticalmente.

    avete qualche suggerimento??

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,681
    Ciao, per centrare una immagine di background puoi applicare center center come valore della sotto-proprietà background-position,. Bisogna però capire meglio il contesto perché non mi è chiaro quale sia il tuo punto di partenza.
    Col solo codice postato mi viene difficile riprodurre il problema. Se ti è possibile, ti chiedo di postare un link o un esempio minimo con cui si possa verificare direttamente lo scenario che descrivi.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    risolto come dicevi tu:
    codice:
    .accordion-button::after {
      background-color: #52B377;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      text-align: center;
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
      background-position: center center;
    }
    ho giocato ore con l'svg senza pensare alla soluzione più semplice .
    grazie per la dritta!

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,681
    Ottimo
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.