Replacing color with transparent blends outer colors together, how to prevent that?

asasass · February 10, 2024, 2:52pm

Background image behind modal:

<div id="myModal" class="modal open">
	<div class="modal-content">
		<div class="blog-pager close">
			<a title="Exit" aria-label="Close"></a>
		</div>
		<div class="ratio-keeper">
			<div class="wrap hide">
				<div class="video video-frame remove" data-id="AxLxnN6z0Og"></div>
			</div>
			<div class="panel"></div>
		</div>
		<div class="playInitial remove"></div>
	</div>
	<svg class="in-modal" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
		<use href="#box" />
	</svg>
</div>

PaulOB · February 10, 2024, 3:05pm

Yes but what is it there for?

In this fiddle if you remove it I see no difference (except the gradients don’t clash anymmore).

asasass · February 10, 2024, 4:00pm

There’s something broken on here: https://jsfiddle.net/oyk70sp6/

bottom scroll bar:

after clicking blog pager

PaulOB · February 10, 2024, 5:10pm

This rule:

.panel-left, .panel-right svg {
  width: calc(200% - 2px);
  position: absolute;
  top: 0;

}

Should be like this:

.panel-left svg, 
.panel-right svg {
  width: calc(200% - 2px);
  position: absolute;
  top: 0;

}

asasass · February 10, 2024, 9:07pm

When viewed like this, background should be behind the svg.

Would you know what the reason is for this to be occuring?

https://jsfiddle.net/6aqjxf0b/1/

How do I fix that in the code?

asasass · February 11, 2024, 11:32am

I couldn’t figure out how to fix the code above.

What would go in the css?

to hide the bground.

maybe I wrote the js wrong.

This is perfect.

.bground {
  background-color:red;
  position:absolute;
  left: 0;
  right:0;
  top: 0;
  height: 100%;
}

https://jsfiddle.net/pnu8cjLq/

<div class="bground hide">
  <svg class="in-modal" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <use href="#box" />
  </svg></div>

function manageModal() {
  const myModal = document.querySelector("#myModal");
  const closeButton = document.querySelector(".close");
  const bground = document.querySelector(".bground");

  function modalClickHandler() {
 myModal.classList.remove("open");
 bground.classList.add("hide");
    }

  addCloseButtonHandler(modalClickHandler);
}

PaulOB · February 11, 2024, 12:32pm

Yes the svg is only as high as the inner window but when you scroll the window the svg scrolls with it. I don’t see a solution other than using the background svg as I suggested 80 posts ago. You have created 80 posts because you wanted to add css variables but as you never change them it seems pointless to me.

You still didn’t answer my question as to what that .in-modal svg is actually doing. If you remove it the page seems to work as you wanted?

That seems to have the second background removed which is why it works. If its perfect then why change it?

To be honest I have no idea where we are with this as it has changed so much. I can’t see the logic for what you are doing and why you keep layering background upon background. At nearly every stage of this there has been a working example which was then changed to not work. This really isn’t the way to build these things. You need to have a defined objective because changing one part may mean changing the whole structure when you have complicated layering like this.

You probably should go back to a fully working example and then decide what needs to be done before swapping stuff around. All these problems seem to be generated by the fact that you want your square boxes to have transparent parts. Is that really worth all this effort.

asasass · February 11, 2024, 1:17pm

Do you mean remove all of this?

  <svg class="in-modal" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <use href="#box" />
  </svg>

PaulOB · February 11, 2024, 8:34pm

I’m asking what that does? What is it used for and why is it needed.

There’s so much going on in that page that for someone looking in from the outside its not easy to tell what is working and what is not without a clear idea of what its should be doing

asasass · February 12, 2024, 12:28pm

This code: https://jsfiddle.net/1038kh9y/

This uses different style properties that you set up.

fill/stroke-width.

            <rect x='0' y='0' width='165' height='165' style="fill:#0000;stroke-width:10;stroke:teal" />
            <rect x='10' y='10' width='150' height='150' style="fill:#0000;stroke-width:10;stroke:black" />
            <rect x='15' y='15' width='140' height='140' style="fill:#0000;stroke-width:10;stroke:orange" />
            <rect x='20' y='20' width='130' height='130' style="fill:#0000;stroke-width:10;stroke:black" />
            <rect x='25' y='25' width='120' height='120' style="fill:#0000;stroke-width:10;stroke:teal" />
            <rect x='30' y='30' width='110' height='110' style="fill:#0000;stroke-width:10;stroke:black" />
            <rect x='35' y='35' width='100' height='100' style="fill:#0000;stroke-width:10;stroke:orange" />
            <rect x='40' y='40' width='90' height='90' style="fill:#0000;stroke-width:10;stroke:black" />
            <rect x='45' y='45' width='80' height='80' style="fill:#0000;stroke-width:10;stroke:teal" />
            <rect x='50' y='50' width='70' height='70' style="fill:#0000;stroke-width:10;stroke:black" />
            <rect x='55' y='55' width='60' height='60' style="fill:#0000;stroke-width:10;stroke:orange" />
            <rect x='60' y='60' width='50' height='50' style="fill:#0000;stroke-width:10;stroke:black" />
            <rect x='65' y='65' width='40' height='40' style="fill:#0000;stroke-width:10;stroke:teal" />
            <rect x='70' y='70' width='30' height='30' style="fill:#0000;stroke-width:10;stroke:black" />
            <rect x='75' y='75' width='20' height='20' style="fill:#0000;stroke-width:10;stroke:orange" />
            <rect x='80' y='80' width='10' height='10' style="fill:#0000;stroke-width:10;stroke:black" />
            <rect x='85' y='85' width='10' height='10' style="fill:#0000;stroke-width:10;stroke:teal" />

Doesn’t look like this: https://jsfiddle.net/kdfe32hn/

<svg width="165" height="165" viewBox="0 0 165 165">
  <rect x="0" y="0" width="165" height="165" fill="teal" />
  <rect x="5" y="5" width="160" height="160" fill="black" />
  <rect x="10" y="10" width="150" height="150" fill="orange" />
  <rect x="15" y="15" width="140" height="140" fill="black" />
  <rect x="20" y="20" width="130" height="130" fill="teal" />
  <rect x="25" y="25" width="120" height="120" fill="black" />
  <rect x="30" y="30" width="110" height="110" fill="orange" />
  <rect x="35" y="35" width="100" height="100" fill="black" />
  <rect x="40" y="40" width="90" height="90" fill="teal" />
  <rect x="45" y="45" width="80" height="80" fill="black" />
  <rect x="50" y="50" width="70" height="70" fill="orange" />
  <rect x="55" y="55" width="60" height="60" fill="black" />
  <rect x="60" y="60" width="50" height="50" fill="teal" />
  <rect x="65" y="65" width="40" height="40" fill="black" />
  <rect x="70" y="70" width="30" height="30" fill="orange" />
  <rect x="75" y="75" width="20" height="20" fill="black" />
  <rect x="80" y="80" width="10" height="10" fill="teal" />
</svg>

asasass · February 12, 2024, 12:59pm

How come:

svg html: https://jsfiddle.net/sy51gvr6/

Set as a background image is not working? https://jsfiddle.net/s7z1xjcL/2/

Why is it not working?

I am confused and don’t understand why it is not.

background-image: url('data:image/svg+xml,<svg width="165" height="165" viewBox="0 0 165 165"><rect x="80" y="80" width="10" height="10" style="stroke: rgb(0, 0, 0); stroke-width: 0px; fill: rgb(17, 85, 204);" /><rect x="72.5" y="72.5" width="25" height="25" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="62.5" y="62.5" width="45" height="45" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="52.5" y="52.5" width="65" height="65" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="42.5" y="42.5" width="85" height="85" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="32.5" y="32.5" width="105" height="105" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="22.5" y="22.5" width="125" height="125" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="12.5" y="12.5" width="145" height="145" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="2.5" y="2.5" width="165" height="165" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /></svg>');
  background-size: 165px 165px;
}

<svg width="165" height="165" viewBox="0 0 165 165">
<rect x="80" y="80" width="10" height="10" style="stroke: rgb(0, 0, 0); stroke-width: 0px; fill: rgb(17, 85, 204);" />
<rect x="72.5" y="72.5" width="25" height="25" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" />
<rect x="62.5" y="62.5" width="45" height="45" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" />
<rect x="52.5" y="52.5" width="65" height="65" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" />
<rect x="42.5" y="42.5" width="85" height="85" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" />
<rect x="32.5" y="32.5" width="105" height="105" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" />
<rect x="22.5" y="22.5" width="125" height="125" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" />
<rect x="12.5" y="12.5" width="145" height="145" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" />
<rect x="2.5" y="2.5" width="165" height="165" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" />
</svg>

This way does not work either:

https://jsfiddle.net/y0u79de4/

body {

    background-image: url("data:image/svg+xml,%3Csvg width='165' height='165' viewBox='0 0 165 165'%3E%3Crect x='80' y='80' width='10' height='10' style='stroke: rgb(0, 0, 0); stroke-width: 0px; fill: rgb(17, 85, 204);' /%3E%3Crect x='72.5' y='72.5' width='25' height='25' style='fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);' /%3E%3Crect x='62.5' y='62.5' width='45' height='45' style='fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);' /%3E%3Crect x='52.5' y='52.5' width='65' height='65' style='fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);' /%3E%3Crect x='42.5' y='42.5' width='85' height='85' style='fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);' /%3E%3Crect x='32.5' y='32.5' width='105' height='105' style='fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);' /%3E%3Crect x='22.5' y='22.5' width='125' height='125' style='fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);' /%3E%3Crect x='12.5' y='12.5' width='145' height='145' style='fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);' /%3E%3Crect x='2.5' y='2.5' width='165' height='165' style='fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);' /%3E%3C/svg%3E");
}

PaulOB · February 12, 2024, 3:33pm

Works for me if I use the encoder from here:

PaulOB · February 12, 2024, 3:46pm

isn’t that just the last item needs to be positrioned and filled correctly.

e.g.

etc...
             <rect x='80' y='80' width='10' height='10' style="fill:#0000;stroke-width:10;stroke:black" />
            <rect x='80' y='80' width='10' height='10' style="fill:teal" />
          </pattern>
        </defs>

Or thereabouts.

asasass · February 12, 2024, 3:51pm

How come the 5 images can’t be seen through the transparent svg?

https://jsfiddle.net/7z18oe9g/2/

PaulOB · February 12, 2024, 4:37pm

They are behind the video and the modal.

The video isn’t transparent and the modal has a black background applied to it so you won’t see anything underneath anyway.

asasass · February 12, 2024, 4:47pm

Now it works: https://jsfiddle.net/ukpd048w/

asasass · February 12, 2024, 4:54pm

I shouldn’t be seeing red if both are aligned together, right?

That would be because of this: https://jsfiddle.net/7ms1nc26/1/

I don’t think setting the first background image class to these properties would work to keep them equal?

Would there be a way to have them match?

  .panel-left,
  .panel-right {
    position: fixed;
    height: 100%;
    /*width: 50%;*/
    width: calc(50% + 1px);
    /* rounding error fix */
}

Adding: width: calc(50% + 1px);

to this:

  .modal.open {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 8px 8px;
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    /* Enable scroll if needed */
    background-color: transparent;

asasass · February 12, 2024, 6:45pm

I forgot to add this: xmlns="http://www.w3.org/2000/svg"

https://jsfiddle.net/dfxawtce/1/

Now it works:

.panel-left::before,
.panel-right::before {
  content: "";
  position: fixed;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="165" height="165" viewBox="0 0 165 165"><rect x="80" y="80" width="10" height="10" style="stroke: rgb(0, 0, 0); stroke-width: 0px; fill: rgb(17, 85, 204);" /><rect x="72.5" y="72.5" width="25" height="25" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="62.5" y="62.5" width="45" height="45" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="52.5" y="52.5" width="65" height="65" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="42.5" y="42.5" width="85" height="85" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="32.5" y="32.5" width="105" height="105" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="22.5" y="22.5" width="125" height="125" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="12.5" y="12.5" width="145" height="145" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="2.5" y="2.5" width="165" height="165" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /></svg>');
  background-size: 165px 165px;
}

Browser support:
Modern /><rect
Legacy (IE9+) %3E%3Crect

https://www.svgbackgrounds.com/tools/svg-to-css/

PaulOB · February 12, 2024, 7:27pm

asasass:

Would there be a way to have them match?

  .panel-left,
  .panel-right {
    position: fixed;
    height: 100%;
    /*width: 50%;*/
    width: calc(50% + 1px);
    /* rounding error fix */
}

The +1px was from your old design where you were getting a gap in Firefox at some resolutions.

You could either just make it 50% or you could try offsetting the right panel.

e.g.

.panel-right.slide {
    right: -2px;
}

asasass · February 14, 2024, 12:48pm

How would I have the footer go all the way across?

It stops at both sides. https://jsfiddle.net/suycob71/4/

Topic		Replies	Views
Changing blue color to transparent HTML & CSS	37	3067	March 10, 2022
SVG background replacement with background-image HTML & CSS	5	9970	September 16, 2020
Transparency issue HTML & CSS	5	521	October 8, 2014
Css color overlay instead of opacity change HTML & CSS	13	5963	October 8, 2014
Base64 SVG: Fill Color Using CSS? HTML & CSS	2	11525	October 8, 2014

Replacing color with transparent blends outer colors together, how to prevent that?

Related topics